vue-roc-date-picker

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

Demo

Installation 安裝

npm i vue3-roc-date-picker

Usage 用法

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

app.use(ROCDatePicker);

// App.vue
<ROCDatePicker
  v-model="value"
/>

Attributes 屬性

• modelValue: 日期選擇器綁定值。
• lang: 語言選擇。
• calendarYearType: 年份類型選擇。
• placeholder: 佔位符文本。
• type: 日期選擇器的類型。
• defaultValue: 默認值。
• disabled: 是否禁用日期選擇器。
• zIndex: 元素的 z-index。
• showClearButton: 是否顯示清除按鈕。

| Name | Description | Type | Accepted Values | Default Value | |---------------------|--------------------------------------------|------------------------|-------------------------------------|---------------| | model-value / v-model| Binding value. | String | Any valid string 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 | Type of date picker. | String | 'year', 'month', 'date' | 'date' | | defaultValue | Default date of calendar. | String | Valid date string (e.g., '2023-09-28') | '' | | disabled | Whether the date picker is disabled. | Boolean | true or false | false | | zIndex | Z-index of the pop-up calendar. | Number | Any valid positive integer | 1 | | showClearButton | Whether to show the clear button. | Boolean | true or false | true |