A basic date and time picker plugin for Vue.js 2.x. Also supports inline calendar mode.
How to use it:
1. Import and register the datetime picker.
import DateTimePicker from 'vue-vanilla-datetime-picker'; // stylesheet @import "node_modules/vue-vanilla-datetime-picker/dist/DateTimePicker"
Vue.component('date-time-picker', DateTimePicker);
2. Basic usage.
<date-time-picker v-model="date" format="DDDD" ></date-time-picker>
3. Available props.
value: {
required: true,
},
minDate: {
default: () => null,
},
maxDate: {
default: () => null,
},
initialViewDate: {
default: () => null,
},
disabledDates: {
type: [Array],
default: () => [],
},
highlighted: {
type: [Array],
default: () => [],
},
constraintsFormat: {
type: [String],
default: 'yyyy-LL-dd',
},
initialView: {
type: [String],
default: 'days',
},
mainButtonClass: {
type: [String],
default: '',
},
format: {
type: [String],
default: 'yyyy-LL-dd HH:mm',
},
disabled: {
type: [Boolean],
default: false,
},
valueFormat: {
type: [String],
default: 'yyyy-LL-dd HH:mm:ss',
},
valueType: {
type: [String],
default: 'Auto',
},
emptyValue: {
default: '',
},
minuteStep: {
type: [Number],
default: 1,
},
inline: {
type: [Boolean],
default: false,
},
timePicker: {
type: [Boolean],
default: true,
},
hourTime: {
type: [Number],
default: 24,
},
startFromSunday: {
type: [Boolean],
default: false,
},
secondsPicker: {
type: [Boolean],
default: false,
},
locale: {
type: [String],
default: 'en',
},
autoClose: {
type: [Boolean],
default: false,
},
clearButton: {
type: [Boolean],
default: false,
},
todayButton: {
type: [Boolean],
default: false,
},
closeButton: {
type: [Boolean],
default: false,
},
noToggleTimePicker: {
type: [Boolean],
default: false,
},
onlyTimePicker: {
type: [Boolean],
default: false,
},
Preview:
Changelog:
v1.2.0 (02/06/2022)
- Update
Download Details:
Author: Shchepotin
Live Demo: https://codepen.io/Shchepotin/pen/wEQyQx?editors=1010
Download Link: https://github.com/Shchepotin/vue-vanilla-datetime-picker/archive/master.zip
Official Website: https://github.com/Shchepotin/vue-vanilla-datetime-picker
Install & Download:
# NPM
$ npm install vue-vanilla-datetime-picker --save