VueJS component to select dates & time, including a range mode

Overview

VueCtkDateTimePicker

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

Build Status

This documentation is for v2.*. Find v1 documentation here

vue-ctk-date-time-picker

Dark mode

vue-ctk-date-time-picker

Demo

Enjoy

Installation

Yarn

yarn add vue-ctk-date-time-picker

NPM

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

Usage

ES6 Modules / CommonJS

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" />

UMD

<link
  rel="stylesheet"
  type="text/css"
  href="${YOUR_PATH}/vue-ctk-date-time-picker.css"
/>

<div id="app">
  <VueCtkDateTimePicker v-model="yourValue"></VueCtkDateTimePicker>
</div>

<script src="https://unpkg.com/vue" charset="utf-8"></script>
<script
  src="${YOUR_PATH}/vue-ctk-date-time-picker.umd.min.js"
  charset="utf-8"
></script>

<script type="text/javascript">
  Vue.component('vue-ctk-date-time-picker', window['vue-ctk-date-time-picker']);
  new Vue({
    el: '#app',
    data() {
      return {
        yourValue: null
      };
    }
  });
</script>

Here is an example of UMD implementation.

Use custom element to trigger the component

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

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

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

(2) error : When is true --> 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 : Set locale="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, a key, label and value must be specified. The key is a unique key for that specific shortcut. Additional values can be passed as a callback function that will be called whenever the user clicks on the shortcut. The callback receives an object as first argument with the start and end values, with the shortcut object itself. You can use this feature for translate existings shortcuts. If the value of shortcut is a number (Integer), this number correspond to number of day (for 5 --> Last 5 days).

If the value of shortcut is a function, we'll use it to generate the start and end values. This function should return an object with the start & end values. Both values must 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 the shortcut property, you can specify a shortcut that's selected by default by passing it's key 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 a type attribute, the <input> will receive it).

Behaviour

In order to avoid having too much properties in the component, We're adding a behaviour 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
    }
  }"
/>
Behaviour Description Type Default
time.nearestIfDisabled If true, it will select the nearest available hour in the timepicker, if the current selected hour is disabled. Per example, if the hour is 12 but all the hours have been disabled until 14, then the 14 will be selected by default. Set false to disable this behaviour; the current hour will remain selected even if it has been disabled. The user cannot re-select it. Boolean true

Events API

Event Return
input value (formatted with 'format' props)
formatted-value value (formatted with 'formatted' props)
is-shown Component is shown
is-hidden Component is hidden
validate Click on validate button (so component is closed)
destroy Component is destroy

Keyboard Accessible

Key Action
Arrow Right Next Day
Arrow Left Previous Day
Arrow Down Same day on next week
Arrow Up Same day on previous week
Page Down Same day on previous month
Page Up Same day on next month
Enter or Space Select day
Escape Close component

Upcoming features (Todo)

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

Contribute

Setting up development server

Without Docker

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

  • node >= 6.0
  • npm >= 3.0

This project is built with [email protected].

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 at http://localhost:8080.

Docker

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 through http://localhost:8080.

Compiles and hot-reloads for development

npm run serve

Linter

npm run lint

Tests

Work in progress

License

This project is licensed under MIT License

Credit

Open source time proudly sponsored by Chronotruck

A vue plugin to select jalali date and time

vue-persian-datetime-picker A vue plugin to select jalali date and time See documentation and demo at vue-persian-datetime-picker Installation browser

Mohamad Talkhabi 498 Jan 16, 2022
A vue plugin to select jalali date and time

vue3-persian-datetime-picker A vue plugin to select jalali date and time See documentation and demo at vue-persian-datetime-picker. If you are using v

Mohamad Talkhabi 26 Jan 11, 2022
A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support

Vue2 Timepicker ?? Dead repo recharged ?? A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support. Demo You can see

Phoenix Wong 419 Jan 15, 2022
A Vue component of formatting dates using moment.

el-moment A Vue component of formatting dates using moment. Installation yarn add el-moment moment # npm i el-moment moment -S Usage import ElMoment f

null 9 Oct 18, 2018
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

Vue 3 Datepicker A datepicker Vue component. Compatible with Vue 3 Only Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dat

shubhadip 19 Jan 16, 2022
Vue date range picker component

A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out

Krystal Campioni 724 Jan 24, 2022
A vue component using Bootstrap 4 styles for date range selection

vue-date-range-picker A vue component using Bootstrap 4 styles for date range selection Live demo (jsfiddle) Features Date range selection Compare fea

Antoine Matyja 30 Mar 31, 2021
Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. Documentation For full documentation, visit lite

Ken 199 Jan 20, 2022
Range date picker with simple usage

VueRangedatePicker Date picker with range selection Demo https://bliblidotcom.github.io/vue-rangedate-picker/demo/ Installation npm install --save vue

Blibli.com 216 Dec 15, 2021
a date-range-picker follows the Material Design spec powered by vue.js (alpha)

Document | 中文文档 If the document is not accessible, please open an issue, I will fix it right away. v-md-date-range-picker Material Design DateRangePic

小小鲁班 67 Oct 27, 2021
A vue2 range datepicker

A simple range datepicker based on Vue2

HC 3 Sep 13, 2021
A date-range-picker follows the Material Design spec powered by vue.js

A date-range-picker follows the Material Design spec powered by vue.js

小小鲁班 67 Oct 27, 2021
🕒 Simply customizable powerful time picker for Vue.js

vue-timeselector ?? Simple customizable Vue.js timepicker component vue-timeselector is a Vue (2.x) component that gives you ability to select a time

Alexis Colin 40 Oct 27, 2021
Vue time picker!

Vue Time Picker DEMO Simple, no nonsense time picker built and optimized for Vue. Installation Yarn yarn add -D @tygr/vue-time-picker import TimePick

Tyler Grinn 6 Oct 28, 2020
Lightweight and mobile friendly date time picker based on Vue.

Vue date pick Lightweight and mobile friendly date time picker based on Vue. Vue date pick emphasizes performance, elegant and usable UI on all screen

Damir Brekalo 230 Jan 10, 2022
VueJS Monthly Picker component

vue-monthly-picker Vue Monthly Picker Components Checkout demo at https://ittus.github.io/vue-monthly-picker/ Support Install npm install vue-monthly-

Thang Minh Vu 63 Jan 2, 2022
Fast, powerful and easy to use component datetime picker for VueJS

Vue Datetime Picker Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable dat

Vladyslav Shchepotin 29 Sep 22, 2021
A VueJs datepicker with a similar look and functionality as the popular AirBnb datepicker.

vue-airbnb-style-datepicker This is a VueJs version of the popular AirBnb datepicker. Supports range selection, disabling of dates, custom configurati

Mikael Edebro 501 Dec 8, 2021
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

Tom 82 Jan 5, 2022