vue-datepicker

Repository

https://github.com/livelybone/vue-datepicker

Datepicker

Example

Code

new Vue({
el: '#date-picker',
template: '<datepicker :value="date"' +
' @input="log"' +
' min="2018-6-1"' +
' max="2020-01-01"' +
' :dayStr="dayStr"' +
' :scrollbarProps="{isMobile: isM}"' +
' :popperProps="popperProps"/>',
data: function () {
return {
dayStr: ['7', '1', '2', '3', '4', '5', '6'],
date: '2018-06-01',
isM: isM,
popperProps: popperProps
}
},
methods: {
log: function (val) {
this.date = val
console.log(val)
}
},
components: { 'datepicker': VueDatepicker.Datepicker }
})

Timepicker

Example

Code

new Vue({
el: '#time-picker',
template: '<timepicker type="second"' +
' :value="time"' +
' @input="log"' +
' min="02:10:02"' +
' max="22:10:00"' +
' :timeStr="timeStr"' +
' :scrollbarProps="{isMobile:isM,maxHeight:\'2rem\'}"' +
' :popperProps="popperProps"/>',
data: function () {
return {
timeStr: ['hour', 'min', 'sec'],
time: '03:02:01',
isM: isM,
popperProps: popperProps
}
},
methods: {
log: function (val) {
this.time = val
console.log(val)
}
},
components: { 'timepicker': VueDatepicker.Timepicker }
})

DatetimePicker

Example

Code

new Vue({
el: '#datetime-picker',
template: '<datetime-picker type="second"' +
' :value="time"' +
' @input="log"' +
' min="2018-08-24 02:10:02"' +
' max="2020-09-1 22:10:00"' +
' :timeStr="timeStr"' +
' :scrollbarProps="{isMobile:isM,maxHeight:\'2rem\'}"' +
' :popperProps="popperProps"/>',
data: function () {
console.log('datetime-picker')
return {
timeStr: ['hour', 'min', 'sec'],
time: '2019-02-01 01:02:01',
isM: isM,
popperProps: popperProps
}
},
methods: {
log: function (val) {
this.time = val
console.log(val)
}
},
components: { 'datetime-picker': VueDatepicker.DatetimePicker }
})

Other Code


popperConfig, see in @livelybone/vue-popper

var popperProps = {
popperOptions: {
modifiers: {
preventOverflow: {
padding: 20
}
},
onUpdate: function (data) {
console.log(JSON.stringify(data.attributes))
}
}
}