VueCtkDateTimePicker is a Vue component of selection dates (available range mode) and time.
vue ctk date time picker position, vue date time picker, date & time slot picker, vue time picker, vue3 date time picker, nuxt date time picker, vuectkdatetimepicker invalid date
A Simple and Easy jQuery Date and Time Picker | jSunPicker
How to make use of it:
Install & Download:
# NPM $ npm install vue-ctk-date-time-picker --save
Usage
import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';
Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);
<VueCtkDateTimePicker v-model="yourValue" />
Props API
| Props | Type | Required | Default |
|---|---|---|---|
| v-model | String | yes | – |
| format | String | no | ‘YYYY-MM-DD hh:mm a’ |
| formatted | String | no | ‘llll’ (momentjs format) |
| label | String | no | Select date & time |
| hint (1) | String | no | – |
| error (2) | Boolean | no | false |
| color (3) | String (hex) | no | dodgerblue |
| button-color (4) | String (hex) | no | #00C853 |
| position | String | no | null |
| locale (5) | String | no | Browser Locale |
| persistent | Boolean | no | false |
| minute-interval | Integer | no | 1 |
| output-format | String | no | null |
| only-time | Boolean | no | false |
| only-date | Boolean | no | false |
| no-label | Boolean | no | false |
| no-header | Boolean | no | false |
| no-value-to-custom-elem (6) | Boolean | no | false |
| min-date (7) | String | no | – |
| max-date (7) | String | no | – |
| no-weekends-days | Boolean | no | false |
| auto-close | Boolean | no | false |
| inline | Boolean | no | false |
| overlay | Boolean | no | false |
| range | Boolean | no | false |
| dark | Boolean | no | false |
| no-shortcuts | Boolean | no | false |
| no-button | Boolean | no | false |
| input-size | String (sm or lg) | no | null |
| button-now-translation | String | no | ‘Now’ |
| no-button-now | Boolean | no | false |
| first-day-of-week | Int (0 to 7) | no | – |
| disabled-dates (8) | Array<string> | no | [] |
| disabled-hours (9) | Array<string> | no | – |
| shortcut | String | no | – |
| custom-shortcuts (10) | Array<object> | no | – |
| disabled-weekly (11) | Array<integer> | no | [] |
| no-keyboard (12) | Boolean | no | false |
| right (13) | Boolean | no | false |
| noClearButton | Boolean | no | false |
| behaviour | Object | no | See behaviour |
| id (14) | String | no | undefined |
vue.js ctk date time picker component, VueCtkDateTimePicker Plugin/Github
See Demo And Download
Official Website(chronotruck): Click Here
This superior jQuery/javascript plugin is developed by chronotruck. For extra advanced usage, please go to the official website.
