vue-vanilla-datetime-picker
vue-vanilla-datetime-picker copied to clipboard
Published
20 hours ago •
Shchepotin
Shchepotin
Fast, powerful and easy to use component datetime picker for VueJS
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
Metadata
32
Stars
5
Forks
Watchers
Owner
Shchepotin
Metadata
Fast, powerful and easy to use component datetime picker for VueJS