Vue Datetime Picker

Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable date, 12/24-hour time, inline mode, etc.

Demo

See demo here

Requirements

• Vue.js ^2.5.0

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' | | initial-view-date | | String, Date, DateTime (luxon) | days | Initial date view | | 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 | | change-month | | change-year | | change-decade |

Methods:

| Name | Description | | --------------------- | --------------------- | | open | Open datetime picker | | close | Close datetime picker |

What about RTL support?

If you need an RTL version of component for your project, recommend use PostCSS plugin which is called postcss-rtl.

Development

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build-lib