{"id":12448,"library":"vue-ctk-date-time-picker","title":"Vue CTK Date Time Picker","description":"Vue CTK Date Time Picker is a flexible Vue.js component for selecting dates and times, offering both single-date and range selection modes. Its current stable version is 2.6.1. The package maintains an active release cadence, frequently delivering bug fixes and new features, especially since Chronotruck took over its maintenance around version 2.2.0. Key differentiators include built-in dark mode, support for custom shortcuts with callback functions, compatibility with Nuxt.js, locale reactivity, and granular control over disabled dates and keyboard navigation. It is designed to be highly configurable, supporting various date and time formats and offering both ESM/CommonJS and UMD distributions for different project setups.","status":"active","version":"2.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/chronotruck/vue-ctk-date-time-picker","tags":["javascript","vue","vue-component","input","date","time","range","picker","typescript"],"install":[{"cmd":"npm install vue-ctk-date-time-picker","lang":"bash","label":"npm"},{"cmd":"yarn add vue-ctk-date-time-picker","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-ctk-date-time-picker","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Use named import syntax for CJS environments or dynamic imports for advanced scenarios.","wrong":"const VueCtkDateTimePicker = require('vue-ctk-date-time-picker');","symbol":"VueCtkDateTimePicker","correct":"import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';"},{"note":"The CSS is located in the `dist` directory and must be imported separately.","wrong":"import 'vue-ctk-date-time-picker/vue-ctk-date-time-picker.css';","symbol":"CSS Styles","correct":"import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';"},{"note":"While Vue allows kebab-case component names, the library officially registers using PascalCase for global components.","wrong":"Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);","symbol":"Global Component Registration","correct":"Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport VueCtkDateTimePicker from 'vue-ctk-date-time-picker';\nimport 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';\n\nconst app = createApp({\n components: {\n VueCtkDateTimePicker\n },\n setup() {\n const selectedDateTime = ref(null);\n const selectedRange = ref({\n start: null,\n end: null\n });\n\n return {\n selectedDateTime,\n selectedRange\n };\n },\n template: `\n
\n

Single Date/Time Picker

\n \n

Selected: {{ selectedDateTime }}

\n\n

Range Date/Time Picker

\n \n

Start: {{ selectedRange.start }}

\n

End: {{ selectedRange.end }}

\n
\n `\n});\n\napp.mount('#app');","lang":"javascript","description":"This quickstart demonstrates the component's setup, showing both single date/time selection and date range selection using `v-model` and a few common props like `label`, `minute-interval`, `range`, and `output-format`."},"warnings":[{"fix":"Review your `range-shortcuts` configurations. Refer to the official documentation for version 2.4.0+ regarding the new `custom-shortcuts` API, which might replace or modify previous range shortcut behavior.","message":"The behavior and configuration of 'Range shortcuts' were changed, which might require adjustments to existing implementations utilizing this feature. The exact nature of the breaking change beyond 'Range shortcuts' is not fully detailed in the changelog snippet provided but indicates a significant shift.","severity":"breaking","affected_versions":">=2.4.0"},{"fix":"Adjust user expectations and interaction patterns. Time adjustments must now be made through other means, such as direct input or minute/hour selectors.","message":"The behavior of clicking 'AM' or 'PM' buttons has changed. The feature allowing a double-click to add/remove 12 hours from the time selection was removed. Users accustomed to this interaction will find it no longer works.","severity":"breaking","affected_versions":">=2.2.0"},{"fix":"Ensure all instances of the component are updated to version 2.2.0 or newer to benefit from the ID conflict resolution.","message":"Prior to version 2.2.0, the component could suffer from multiple ID conflicts when several instances were rendered on the same page, leading to unpredictable behavior or styling issues.","severity":"gotcha","affected_versions":"<2.2.0"},{"fix":"If precise time constraints are needed for `min-date` or `max-date`, update to version 2.1.0+ and ensure your date strings include the desired time component (e.g., 'YYYY-MM-DD HH:mm').","message":"The `min-date` and `max-date` props now support time components. In versions prior to 2.1.0, these props primarily considered only the date part, which could lead to unexpected behavior if time constraints were implicitly assumed or desired.","severity":"gotcha","affected_versions":"<2.1.0"},{"fix":"Upgrade to version 2.0.8 or newer to ensure that dynamic changes to the `locale` prop are correctly reflected in the picker's interface.","message":"In versions before 2.0.8, changing the `locale` prop dynamically after the component was mounted would not reactively update the displayed locale. The picker would remain in its initial locale.","severity":"gotcha","affected_versions":"<2.0.8"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update `vue-ctk-date-time-picker` to version 2.5.0 or newer, where this specific 'scrollTop' error was addressed.","cause":"An internal issue related to scrolling logic within the component, particularly when elements might not be fully rendered or are inaccessible.","error":"Cannot read properties of undefined (reading 'scrollTop')"},{"fix":"Ensure that the `v-model` value adheres to expected date formats. If using a pre-2.2.0 version, update to 2.2.0 or later, as an underlying bug related to this was fixed.","cause":"Occurred when the date parsing logic encountered an unrecognized or improperly formatted date string, or when certain interaction behaviors led to an invalid date state.","error":"Invalid date"},{"fix":"Upgrade `vue-ctk-date-time-picker` to version 2.3.0 or higher to resolve the issue where the `is-hidden` event was incorrectly emitted multiple times.","cause":"Due to a bug, the `is-hidden` event was sometimes emitted more than once when the picker closed, leading to redundant or incorrect side effects in parent components.","error":"`is-hidden` event emitted multiple times"}],"ecosystem":"npm"}