Vue Datetime Picker

Vue Datetime picker

Vue Datetime picker BY Vladyslav Shchepotin.

Requirements

  • Vue.js ^2.5.17

Usage

npm install vue-vanilla-datetime-picker --save
import DateTimePicker from 'vue-vanilla-datetime-picker';

Vue.component('date-time-picker', DateTimePicker);
@import "node_modules/vue-vanilla-datetime-picker/dist/DateTimePicker"

Props:

Name Required Type Default Description
v-model, value * String, Date, DateTime (luxon) Value
value-format String yyyy-LL-dd HH:mm:ss Value format
max-date String, Date, DateTime (luxon) null Max date
min-date String, Date, DateTime (luxon) null Min date
constraints-format String yyyy-LL-dd Constraints format
locale String en Set locale.
inline Boolean false Enable inline mode.
disabled Boolean false Disable datetime picker.
format String yyyy-LL-dd HH:mm Display format.
time-picker Boolean true Show time picker.
hour-time Number 24 Hour in 12/24-hour time. Values: '12', '24'.
no-toggle-time-picker Boolean false No toggle time picker button.
only-time-picker Boolean false Show only time picker.
start-from-sunday Boolean false Set Sunday as first day of week.
minute-step Number 1 Set step for minute.
seconds-picker Boolean false Show second picker.
initial-view String days Initial view: 'days', 'months', 'years'
main-button-class String Class for main button.
disabled-dates Array [] Array of disabled dates.
highlighted Array [] Array of highlighted dates. Example: [{ date: '2018-09-17', class: 'highlighted' }]
auto-close Boolean false Close date picker after select date.
clear-button Boolean false Show "Clear" button.
close-button Boolean false Show "Close" button.
today-button Boolean false Show "Today" button.
value-type String Auto Set value type. Types: 'Auto', 'String', 'Date', 'Luxon'.
empty-value Any '' Set empty value for clear button.

Slots:

Name Description
choose-date For main button if date not selected.
formatted-datetime For main button if date selected.
date For date button.
time For time button.
months-prev For previous month button.
months-next For next month button.
years-prev For previous year button.
years-next For next year button.
decades-prev For previous decade button.
decades-prev For next decade button.
hours-up For hours up button.
hours-down For hours down button.
minutes-up For minutes up button.
minutes-down For minutes down button.
seconds-up For seconds up button.
seconds-down For seconds down button.
meridiems-up For meridiems up button.
meridiems-down For meridiems down button.
clear For clear button.
close For close button.
today For today button.

Events:

Name
close
open

Development

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build-lib

Lints and fixes files

npm run lint

GitHub