Base data
new Vue({
el: '#app',
data: {
time: new Date(),
range: [new Date(),new Date()],
emptyTime: '',
emptyRange: [],
local: {
dow: 0, // Sunday is the first day of the week
hourTip: 'Select Hour', // tip of select hour
minuteTip: 'Select Minute', // tip of select minute
secondTip: 'Select Second', // tip of select second
yearSuffix: '', // suffix of head year
monthsHead: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'), // months of head
months: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'), // months of panel
weeks: 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_') // weeks,
cancelTip: 'cancel',
submitTip: 'confirm'
}
},
methods: {
//disable the weekend
disabledDate (time) {
var day = time.getDay();
return day === 0 || day === 6;
}
}
})
Default
<vue-datepicker-local v-model="time"></vue-datepicker-local>
Year
<vue-datepicker-local v-model="time" format="YYYY"></vue-datepicker-local>
Month
<vue-datepicker-local v-model="time" format="YYYY-MM"></vue-datepicker-local>
Time
<vue-datepicker-local v-model="time" format="YYYY-MM-DD HH:mm:ss"></vue-datepicker-local>
Disabled
<vue-datepicker-local v-model="time" disabled></vue-datepicker-local>
Clearable
<vue-datepicker-local v-model="emptyTime" clearable></vue-datepicker-local>
<vue-datepicker-local v-model="emptyRange" clearable></vue-datepicker-local>
Range
<vue-datepicker-local v-model="range"></vue-datepicker-local>
Range Separator
<vue-datepicker-local v-model="range" range-separator="至"></vue-datepicker-local>
disabledDate
<vue-datepicker-local v-model="time" :disabled-date="disabledDate" ></vue-datepicker-local>
Local
<vue-datepicker-local v-model="time" :local="local"></vue-datepicker-local>
Inline Mode
<vue-datepicker-local v-model="time" type="inline"></vue-datepicker-local>
<vue-datepicker-local v-model="time" @confirm="confirm" show-buttons ></vue-datepicker-local>