A simple clean date & time selector library to create date pickers, time pickers, and datetime pickers on the Vue.js app.
How to use it:
1. Import, install, and register the vue-datepicker.
// import modules
import {Datepicker, Timepicker, DatetimePicker} from '@livelybone/vue-datepicker';
// or
import * as VueDatepicker from '@livelybone/vue-datepicker';
// Globally
Vue.component('datepicker', Datepicker);
Vue.component('timepicker', Timepicker);
Vue.component('datetime-picker', DatetimePicker);
// Locally
new Vue({
components:{Datepicker, Timepicker, DatetimePicker}
})
2. Create a date picker.
new Vue({
el: '#datepicker',
template: '<datepicker :value="date" @input="log" min="2018-6-1" max="2020-01-01" :dayStr="dayStr" :popperProps="popperProps" :scrollbarProps="{isMobile:isM}"/>',
data: function () {
return {
dayStr: ['7', '1', '2', '3', '4', '5', '6'],
date: '2018-06-01',
popperProps: popperProps,
}
},
methods: {
log: function (val) {
this.date = val
console.log(val)
},
},
components: { 'datepicker': VueDatepicker.Datepicker },
})
3. Create a time picker.
new Vue({
el: '#timepicker',
template: '<timepicker :value="time" @input="log" min="02:10:02" max="22:10:00" :timeStr="timeStr" :scrollbarProps="{isMobile:isM}" :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 },
})
4. Create a datetime picker.
new Vue({
el: '#datetime-picker',
template: '<datetime-picker :value="time" @input="log" min="2018-08-24 02:10:02" max="2020-09-1 22:10:00" :timeStr="timeStr" :scrollbarProps="{isMobile:isM}" :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 },
})
Preview:
Changelog:
v4.1.2 (07/29/2022)
- fix(range picker): cannot chose 1 day
v4.1.1 (03/24/2022)
- fix: secondPlaceholder and min max
v4.1.0 (08/17/2020)
- feat: add script prepublishOnly
v4.0.3 (03/15/2020)
- fix(DatePin): Should not call triggerAfterClickEvent when type is ten-year
v4.0.2 (07/09/2020)
- fix: typeof placeholder, minTime, maxTime
Download Details:
Author: livelybone
Live Demo: https://livelybone.github.io/vue/vue-datepicker/
Download Link: https://github.com/livelybone/vue-datepicker/archive/master.zip
Official Website: https://github.com/livelybone/vue-datepicker
Install & Download:
# NPM
$ npm install @livelybone/vue-datepicker --save