Repository files navigation

A vue component for select dates (range mode available) & time

This documentation is for v2.*. Find v1 documentationhere

Enjoy

Yarn

yarn add vue-ctk-date-time-picker

NPM

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

importVueCtkDateTimePickerfrom'vue-ctk-date-time-picker';import'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';Vue.component('VueCtkDateTimePicker',VueCtkDateTimePicker);

<VueCtkDateTimePickerv-model="yourValue"/>

<linkrel="stylesheet"type="text/css"href="${YOUR_PATH}/vue-ctk-date-time-picker.css"/><divid="app"><VueCtkDateTimePickerv-model="yourValue"></VueCtkDateTimePicker></div><scriptsrc="https://unpkg.com/vue"charset="utf-8"></script><scriptsrc="${YOUR_PATH}/vue-ctk-date-time-picker.umd.min.js"charset="utf-8"></script><scripttype="text/javascript">Vue.component('vue-ctk-date-time-picker',window['vue-ctk-date-time-picker']);newVue({el:'#app',data(){return{yourValue:null};}});</script>

Here is an example ofUMD implementation.

<VueCtkDateTimePicker:no-value-to-custom-elem="(true|false)"/>  ...<inputtype="text"/>  ... or<buttontype="button">Label</button>  ...</VueCtkDateTimePicker>

(1) hint : Is a text that replaces the label/placeholder (Ex : Error designation)

(2) error : When istrue --> Input border & label are red

(3) color: Replace color for the hint, the borders & picker color

(4) button-color: Replace color for the buttons on bottom (validation & 'now')

(5) locale : Default value is the locale of the browser - Ex : Setlocale="fr" to force to French language

(6) no-value-to-custom-elem : No value will set to your elem (you can get the formatted value with @formatted-value event)

(7) min-date && max-date should be in the same format as property format specified. If format not set - it is set to 'YYYY-MM-DD hh:mm a' by default

(8) Disabled-Dates is an Array of dates in 'YYYY-MM-DD' format (ex:['2018-04-03', '2018-04-07', '2018-04-09'])

(9) disabled-hours : Must be an Array of hours in 24h format ('00' to '23') :['00','01','02','03','04','05','06','07','19','20','21','22','23']

(10) custom-shortcuts - It's an array of objects. Each object represents a single shortcut.

[{key:'thisWeek',label:'This week',value:'isoWeek'},{key:'lastWeek',label:'Last week',value:'-isoWeek'},{key:'last7Days',label:'Last 7 days',value:7},{key:'last30Days',label:'Last 30 days',value:30},{key:'thisMonth',label:'This month',value:'month'},{key:'lastMonth',label:'Last month',value:'-month'},{key:'thisYear',label:'This year',value:'year'},{key:'lastYear',label:'Last year',value:'-year'}];

Shortcut types allowed are :['day', '-day', 'isoWeek', '-isoWeek', 'quarter', 'month', '-month', 'year', '-year', 'week', '-week']For each shortcut, akey,label andvalue must be specified. Thekey is a unique key for that specific shortcut.Additional values can be passed as acallback function that will be called whenever the user clicks on the shortcut. The callback receives an object as first argument with thestart andend values, with theshortcut object itself.You can use this feature for translate existings shortcuts.If thevalue of shortcut is a number (Integer), this number correspond to number of day (for 5 --> Last 5 days).

If thevalue of shortcut is a function, we'll use it to generate thestart andend values. This function should return an object with the start & end values. Both valuesmust be a moment object. The function is called when the user clicks on the shortcut button.

[{key:'customValue',label:'My custom thing',value:()=>{return{start:moment(),end:moment().add(2,'days')}},callback:({ start, end })=>{console.log('My shortcut was clicked with values: ',start,end)}},];

With theshortcut property, you can specify a shortcut that's selected by default by passing it'skey value.

  :shortcut="'thisMonth'"

(11) disabled-weekly : Days of the week which are disabled every week, in Array format with day index, Sunday as 0 and Saturday as 6:[0,4,6]

(12) no-keyboard : Disable keyboard accessibility & navigation

(13) right : add this attribute to align the picker on right

(14) id : it assign id such as 'passedstring-input' to input help diffrentiate between two date-time-picker on same component.

Any additionnal attribute passed to the component will be automatically be binded to the input component. (eg. if you passes atype attribute, the<input> will receive it).

In order to avoid having too much properties in the component, We're adding abehaviour property that is an object including some annex behaviour values.

The default value for this object is:

{  time:{    nearestIfDisabled:true;}}

To override those values, pass a new object with the values you want to override:

<ctk-date-time-picker:behaviour="{    time: {      nearestIfDisabled: false    }  }"/>

• Double Calendar on RangeDatePicker (issue : #33)
• Inputs Text to choose values (issue #30)
• TimePicker seconds support (issue : #79)

Ensure you have Node and npm in your machine. Minimal config is:

• node >= 6.0
• npm >= 3.0

This project is built withnode@10.x.

Install the development dependencies by running:

npm install

or

npm ci# Recommanded if you have node > 10.x

Once your dependencies are installed, start the development server with:

npm run serve

This will start the development server available athttp://localhost:8080.

To easily set-up your development environment, you can spin up a container containing the development app.For that, you need Docker with docker-compose in your machine.

Once you've everything running, you can simply run the following command to start the dev server:

docker-compose up -d

This will start the development server inside a container and accessible throughhttp://localhost:8080.

npm run serve

npm run lint

Work in progress

This project is licensed underMIT License

Open source time proudly sponsored byChronotruck