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