Vue CTK Date Time Picker

Common errors

• Cannot read properties of undefined (reading 'scrollTop')

  cause 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

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

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

Warnings

• breaking 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.
  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.
• breaking 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.
  Fix: Adjust user expectations and interaction patterns. Time adjustments must now be made through other means, such as direct input or minute/hour selectors.
• gotcha 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.
  Fix: Ensure all instances of the component are updated to version 2.2.0 or newer to benefit from the ID conflict resolution.
• gotcha 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.
  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').
• gotcha 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.
  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.

Install

• npm install vue-ctk-date-time-picker npm
• yarn add vue-ctk-date-time-picker yarn
• pnpm add vue-ctk-date-time-picker pnpm

Imports

• VueCtkDateTimePicker
  wrong:

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

  correct:

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

  Use named import syntax for CJS environments or dynamic imports for advanced scenarios.
• CSS Styles
  wrong:

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

  correct:

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

  The CSS is located in the `dist` directory and must be imported separately.
• Global Component Registration
  wrong:

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

  correct:

  Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);

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

Quickstart

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