vue-ctk-date-time-picker

vue-ctk-date-time-picker

A vue component for select date & time (by Chronotruck)

Demo

An example is available

Install

npm install vue-ctk-date-time-picker --save

In single component

import CtkDateTimePicker from 'vue-ctk-date-time-picker'

var yourComponent = new Vue({
  components: { CtkDateTimePicker },
  ...
})

<template>
  ...
  <ctk-date-time-picker
    v-model="value"
    :label="'Choose a time'"
    :hint="'Text'"
    :error-hint="true"
    :minute-interval="10" // (for time)
    color="#FF0000" />
  ...
</template>  

Props API

Props	Type	Required	Default
v-model	String/Int	true	-
label	String	false	Enter Text
hint*	text	no	-
error-hint**	Boolean	no	false
color***	String (hex)	no	dodgerblue
minute-interval	Int	no	1
formatted	string	no	'llll' (momentjs format)
format	string	no	'YYYY-MM-DDTHH:mm'
time-format	string	no	'H:mm a'
locale	string	no	en
disable-time	Boolean	no	false
disable-date	Boolean	no	false
without-header	Boolean	no	false
id	string	no	CtkDateTimePicker
min-date****	string	no	-
max-date****	string	no	-
without-button-action	Boolean	no	false

*hint : Is a text that replaces the label/placeholder

**error-hint : When is true --> Input border & label are red

***color: Replace color for the hint, the borders & time selected in dropdown

****min-date & max-date : Must be 'YYYY-MM-DD' format

Contribution

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev