vue-roc-date-picker

A date picker UI component that displays years in Republic Era or Common Era. 以 Vue3 + Typescript 開發，一個可顯示民國 / 西元年的日期選擇器 UI 套件

Demo

Installation

npm i vue3-roc-date-picker

Usage

Import the component and styles in main.ts:

// main.ts
import ROCDatePicker from 'vue3-roc-date-picker';
import 'vue3-roc-date-picker/style.css';

app.use(ROCDatePicker);

Use the component in App.vue:

<ROCDatePicker
  v-model="value"
/>

Style import migration

Recommended:

import 'vue3-roc-date-picker/style.css';

Legacy, still supported:

import 'vue3-roc-date-picker/dist/style.css';

The legacy path is kept for backward compatibility and is planned to be removed in the next major version.

Attributes

| Name | Description | Type | Accepted Values | Default Value | |---|---|---|---|---| | model-value / v-model | Bound value. | Date \| string | Any valid date value | '' | | lang | Language selection. | String | 'en', 'zhTW' | 'zhTW' | | calendarYearType | Year type selection. | String | 'CommonEra', 'RepublicEra' | 'RepublicEra' | | placeholder | Placeholder text. | String | Any valid string value | '' | | type | Date picker type. | String | 'year', 'month', 'date' | 'date' | | defaultValue | Default value. | Date \| string | Valid date value, for example 2023-09-28 | '' | | minDate | Earliest selectable date. | Date \| string | Valid date value | '' | | maxDate | Latest selectable date. | Date \| string | Valid date value | '' | | disabled | Whether the date picker is disabled. | Boolean | true or false | false | | zIndex | Z-index of the popup calendar. | Number | Any valid positive integer | 1 | | showClearButton | Whether to show the clear button. | Boolean | true or false | true | | showTodayButton | Whether to show the Today shortcut button. | Boolean | true or false | false | | closeOnClickOutside | Close the calendar when clicking outside. | Boolean | true or false | true | | closeOnEscape | Close the calendar when pressing Esc. | Boolean | true or false | true | | disableWeekends | Disable Saturdays and Sundays. | Boolean | true or false | false | | disabledDates | Explicit list of disabled dates. | (Date \| String)[] | Valid date values | [] |