logo-chronotruck

CtkDatetimePicker

A VueJs component for select date & time

Github Changelog Npm

Date Time Picker

Date & Time selector

Inititale value : 2018-04-07 20:26

v-model = 2018-04-07 20:26

Range Date Picker

Date Range selector - With custom element to trigger the component (only input or button)

Inititale value : { "start": "2018-04-05", "end": "2018-04-20" }

v-model = { "start": "2018-04-05", "end": "2018-04-20" }

Date Picker

Date selector - right position - noLabel true - With large input (input-size="lg") - format: "MM-DD-YYYY" - formatted: "ll"

Inititale value : 14-01-2019

v-model = 14-01-2019

Time Picker - With small input (input-size="sm") & minute-interval="10"

Time selector

Inititale value : 11:26 am

v-model = 11:26 am

Inline Picker

Inline selector with keyboard accessibility disabled & disabled weekly dates (available for all pickers)

Inititale value : { "start": "2018-04-05", "end": "2018-04-20" }

v-model = { "start": "2018-04-05", "end": "2018-04-20" }

2018
Apr 5, 2018 - Apr 20, 2018
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Disabled Picker

(disabled="true")

Inititale value : null

v-model = null

Min and Max date with time in 24h-format

minDate: 2019-03-03 20:10, maxDate: 2019-06-24 09:14

Inititale value : 2019-03-04 20:26

v-model = 2019-03-04 20:26

Min and Max date with time in 12h-format

minDate: 2019-03-03 8:10 pm, maxDate: 2019-06-24 9:14 am

Inititale value : 2019-03-03 8:10 pm

v-model = 2019-03-06 8:20 pm

Enabled/Disabled dates Picker

Inititale value : { "disabledDates": [ "2021-02-22" ], "enabledDates": [ "2021-02-21", "2021-02-22", "2021-02-23" ] }

v-model = 2021-02-22

2021
Mon 22 Feb
00 : 00
Sun
Mon
Tue
Wed
Thu
Fri
Sat