Socket
Socket
Sign inDemoInstall

vue-ctk-date-time-picker

Package Overview
Dependencies
32
Maintainers
3
Versions
82
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-ctk-date-time-picker

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


Version published
Maintainers
3
Weekly downloads
25,064
increased by23.51%

Weekly downloads

Readme

Source

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 (using Slots api)

<VueCtkDateTimePicker>
  <template v-slot="{ dateFormatted, toggleDatePicker, isOpen, close }">
    ...
    <input
      type="text"
      :value="dateFormatted"
      @focus="toggleDatePicker(true)"
    >
    ... or
    <button
      type="button"
      @click="toggleDatePicker(true)"
    >
      {{ dateFormatted }}
    </button>
    ...
  </template>
</VueCtkDateTimePicker>

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
min-date (6)Stringno-
max-date (6)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 (7)Array<string>no[]
disabled-hours (8)Array<string>no-
shortcutStringno-
custom-shortcuts (9)Array<object>no-
disabled-weekly (10)Array<integer>no[]
no-keyboard (11)Booleannofalse
right (12)Booleannofalse
noClearButtonBooleannofalse
behaviourObjectnoSee behaviour
id (13)Stringnoundefined

(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) 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

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

(8) 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']

(9) 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'"

(10) 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]

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

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

(13) 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
    }
  }"
/>
BehaviourDescriptionTypeDefault
time.nearestIfDisabledIf 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.Booleantrue

Events API

EventReturn
inputvalue (formatted with 'format' props)
formatted-valuevalue (formatted with 'formatted' props)
is-shownComponent is shown
is-hiddenComponent is hidden
validateClick on validate button (so component is closed)
destroyComponent is destroy

Keyboard Accessible

KeyAction
Arrow RightNext Day
Arrow LeftPrevious Day
Arrow DownSame day on next week
Arrow UpSame day on previous week
Page DownSame day on previous month
Page UpSame day on next month
Enter or SpaceSelect day
EscapeClose 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 node@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 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

Keywords

FAQs

Last updated on 10 Mar 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc