new Vue({
el: '#date-picker',
template: '<datepicker' +
' :value="date"' +
' @input="log"' +
' min="2018-6-1"' +
' max="2030-01-01"' +
' :dayStr="dayStr"' +
' :scrollbarProps="{isMobile: isM}"' +
' :popperProps="popperProps"' +
'/>',
data: function () {
return {
dayStr: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
date: '2018-06-01',
isM: isM,
popperProps: popperProps,
}
},
methods: {
log: function (val) {
this.date = val
console.log(val)
},
},
components: { 'datepicker': VueDatepicker.Datepicker },
})
new Vue({
el: '#date-picker-first',
template: '<datepicker' +
' :value="date"' +
' @input="log"' +
' min="2018-6-1"' +
' max="2030-01-01"' +
' :dayStr="dayStr"' +
' :scrollbarProps="{isMobile: isM}"' +
' :popperProps="popperProps"' +
' :firstDayOfWeek="1"' +
'/>',
data: function () {
return {
dayStr: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
date: '2018-06-01',
isM: isM,
popperProps: popperProps,
}
},
methods: {
log: function (val) {
this.date = val
console.log(val)
},
},
components: { 'datepicker': VueDatepicker.Datepicker },
})
new Vue({
el: '#multi-date-picker',
template: '<datepicker' +
' :multiple="true"' +
' :value="date"' +
' @input="log"' +
' min="2018-6-1"' +
' max="2030-01-01"' +
' :dayStr="dayStr"' +
' :scrollbarProps="{isMobile: isM}"' +
' :popperProps="popperProps"' +
'/>',
data: function () {
return {
dayStr: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
date: '2018-06-01',
isM: isM,
popperProps: popperProps,
}
},
methods: {
log: function (val) {
this.date = val
console.log(val)
},
},
components: { 'datepicker': VueDatepicker.Datepicker },
})
new Vue({
el: '#date-range-picker',
template: '<date-range-picker' +
' :value="date"' +
' @input="log"' +
' min="2018-6-1"' +
' max="2030-01-01"' +
' :dayStr="dayStr"' +
' :scrollbarProps="{isMobile: isM}"' +
' :popperProps="popperProps"' +
'/>',
data: function () {
return {
dayStr: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
date: ['2018-06-01'],
isM: isM,
popperProps: popperProps,
}
},
methods: {
log: function (val) {
this.date = val
console.log(val)
},
},
components: { 'date-range-picker': VueDatepicker.DateRangePicker },
})
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 },
})
new Vue({
el: '#datetime-picker',
template: '<datetime-picker' +
' timeType="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 },
})
popperConfig, see in @livelybone/vue-popper
var popperProps = {
popperOptions: {
modifiers: {
preventOverflow: {
padding: 20,
},
},
onUpdate: function (data) {
console.log(JSON.stringify(data.attributes))
},
},
}