Press "Enter" to skip to content

VueJS Component To Select Dates & Time Including A Range Mode

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

PropsTypeRequiredDefault
v-modelStringyes
formatStringno‘YYYY-MM-DD hh:mm a’
formattedStringno‘llll’ (momentjs format)
labelStringnoSelect date & time
hint (1)Stringno
error (2)Booleannofalse
color (3)String (hex)nododgerblue
button-color (4)String (hex)no#00C853
positionStringnonull
locale (5)StringnoBrowser Locale
persistentBooleannofalse
minute-intervalIntegerno1
output-formatStringnonull
only-timeBooleannofalse
only-dateBooleannofalse
no-labelBooleannofalse
no-headerBooleannofalse
no-value-to-custom-elem (6)Booleannofalse
min-date (7)Stringno
max-date (7)Stringno
no-weekends-daysBooleannofalse
auto-closeBooleannofalse
inlineBooleannofalse
overlayBooleannofalse
rangeBooleannofalse
darkBooleannofalse
no-shortcutsBooleannofalse
no-buttonBooleannofalse
input-sizeString (sm or lg)nonull
button-now-translationStringno‘Now’
no-button-nowBooleannofalse
first-day-of-weekInt (0 to 7)no
disabled-dates (8)Array<string>no[]
disabled-hours (9)Array<string>no
shortcutStringno
custom-shortcuts (10)Array<object>no
disabled-weekly (11)Array<integer>no[]
no-keyboard (12)Booleannofalse
right (13)Booleannofalse
noClearButtonBooleannofalse
behaviourObjectnoSee behaviour
id (14)Stringnoundefined

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.