Registry / web-framework / vue-ctk-date-time-picker

vue-ctk-date-time-picker

library2.6.1jsnpmunverified

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.

web-framework

npm install vue-ctk-date-time-picker

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-CTK-DATE-TIME-

vue-ctk-date-time-picker

web-frameworkjavascriptv2.6.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueCtkDateTimePicker

✓ import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';

✗ const VueCtkDateTimePicker = require('vue-ctk-date-time-picker');

Use named import syntax for CJS environments or dynamic imports for advanced scenarios.

CSS Styles

✓ import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';

✗ import 'vue-ctk-date-time-picker/vue-ctk-date-time-picker.css';

The CSS is located in the `dist` directory and must be imported separately.

Global Component Registration

✓ Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);

✗ Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);

While Vue allows kebab-case component names, the library officially registers using PascalCase for global components.

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`.

import { createApp, ref } from 'vue'; import VueCtkDateTimePicker from 'vue-ctk-date-time-picker'; import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css'; const app = createApp({ components: { VueCtkDateTimePicker }, setup() { const selectedDateTime = ref(null); const selectedRange = ref({ start: null, end: null }); return { selectedDateTime, selectedRange }; }, template: ` <div> <h2>Single Date/Time Picker</h2> <VueCtkDateTimePicker v-model="selectedDateTime" label="Select Date & Time" :minute-interval="15" /> <p>Selected: {{ selectedDateTime }}</p> <h2>Range Date/Time Picker</h2> <VueCtkDateTimePicker v-model="selectedRange" :range="true" label="Select Date Range" output-format="YYYY-MM-DD" /> <p>Start: {{ selectedRange.start }}</p> <p>End: {{ selectedRange.end }}</p> </div> ` }); app.mount('#app');

Debug

Known issues

breakingThe 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.

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.

affects: >=2.4.0

breakingThe 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.

fix

Adjust user expectations and interaction patterns. Time adjustments must now be made through other means, such as direct input or minute/hour selectors.

affects: >=2.2.0

gotchaPrior 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.

fix

Ensure all instances of the component are updated to version 2.2.0 or newer to benefit from the ID conflict resolution.

affects: <2.2.0

gotchaThe `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.

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').

affects: <2.1.0

gotchaIn 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.

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.

affects: <2.0.8

Errors

Common errors & fixes

Cannot read properties of undefined (reading 'scrollTop')

An internal issue related to scrolling logic within the component, particularly when elements might not be fully rendered or are inaccessible.

fix

Update `vue-ctk-date-time-picker` to version 2.5.0 or newer, where this specific 'scrollTop' error was addressed.

Invalid date

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.

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.

`is-hidden` event emitted multiple times

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.

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.

Upgrade

Version history

2.6.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/chronotruck/vue-ctk-date-time-picker ↗

packagehttps://www.npmjs.com/package/vue-ctk-date-time-picker ↗