vue-datepicker-next

If your project uses SCSS, you can override default variables by creating a custom SCSS file. You can change the $namespace (which requires setting the prefix-class prop on the component) and colors like $default-color and $primary-color before importing the library's styles.

$namespace: 'xmx'; // Change default prefix to 'xmx'. Then set <date-picker prefix-class="xmx" />

$default-color: #555;
$primary-color: #1284e7;

@import '~vue-datepicker-next/scss/index.scss';

By default, the language is English. You can switch to Chinese (or other languages) by importing the specific locale file. You can also override specific language settings using the lang prop with a configuration object.

import DatePicker from 'vue-datepicker-next';
import 'vue-datepicker-next/index.css';

// Import Chinese locale
import 'vue-datepicker-next/locale/zh-cn';

<script>
  export default {
    data() {
      return {
        // Overriding specific settings
        langObject: {
          formatLocale: {
            firstDayOfWeek: 1,
          },
          monthBeforeYear: false,
        },
        // Using a locale string
        langString: 'zh-cn',
      };
    },
  };
</script>

<template>
  <date-picker :lang="langObject"></date-picker>
  <date-picker :lang="langString"></date-picker>
</template>

Install the vue-datepicker-next package using npm to add the Vue 3.x date-time picker component to your project.

$ npm install vue-datepicker-next --save

If your project uses SCSS, you can override default style variables by creating a custom SCSS file and importing the library's SCSS entry point.

You can change the $namespace variable to customize the CSS class prefix. If you change $namespace to 'xmx', you must then use the prefix-class="xmx" prop on the <date-picker /> component.

$namespace: 'xmx'; // change the 'mx' to 'xmx'. then <date-picker prefix-class="xmx" />

$default-color: #555;
$primary-color: #1284e7;

@import '~vue-datepicker-next/scss/index.scss';

Use the valueType prop to determine the data type returned by the component's v-model.

Supported values:

• "date" (default): Returns a JavaScript Date object.
• "format": Returns a string matching the input value format.
• "timestamp": Returns a numeric timestamp.
• token: A specific format string pattern (e.g., a custom date format string).

<date-picker v-model="value" value-type="format" />

The time picker columns (Hour, Minute, Second) are displayed based on the format string (e.g., HH:mm:ss) by default. You can override this behavior using:

Visibility Control:

• showHour
• showMinute
• showSecond

Stepped Intervals:

• hourStep
• minuteStep
• secondStep

Custom Options Lists:

• hourOptions
• minuteOptions
• secondOptions

Use the valueType prop to determine the data type returned by v-model.

Available options:

• "date" (default): Returns a JavaScript Date object.
• "format": Returns a string formatted according to the input field's format.
• "timestamp": Returns a numeric timestamp.
• token: Returns a string formatted according to a specific parsable token.

// Example usage of valueType
<date-picker v-model="dateValue" value-type="timestamp" />

You can install vue-datepicker-next as a Vue plugin to register the DatePicker component globally. This allows you to use <DatePicker /> anywhere in your application without local imports.

import DatePicker from 'vue-datepicker-next';
import 'vue-datepicker-next/dist/index.css';

// In your main.ts or app entry point
const app = createApp(App);
app.use(DatePicker);
app.mount('#app');

To enable range selection (selecting a start and end date), use the component in range mode. This is typically handled by providing an array to the v-model.

<date-picker v-model="dateRange" type="daterange" />

When using a range picker, you can provide a shortcuts array to allow users to quickly select common date ranges. Each shortcut object must contain:

• text: The label displayed for the shortcut.
• onClick: A callback function that must return a Date object.

[
  { text: 'today', onClick: () => new Date() },
  {
    text: 'Yesterday',
    onClick: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
];