Vue 3 功能丰富的日期选择器组件 - vuejs3-datepicker

Vue 3 功能丰富的日期选择器组件 - vuejs3-datepicker
插件名称 vuejs3-datepicker
发布时间 2022年1月16日
插件作者 shubhadip

一个功能丰富、高度可定制、用户友好的 Vue 3 日期选择器组件。

更多功能:

  • 自定义主题。
  • 月/年/日视图。
  • 自定义图标。
  • 自定义触发元素。

安装和下载:

# Yarn
$ yarn add vuejs3-datepicker

# NPM
$ npm i vuejs3-datepicker

使用:

1. 导入日期选择器组件。

import Datepicker from 'vuejs3-datepicker';

2. 注册。

export default {
  components: {
    Datepicker
  }
}

3. 将组件添加到应用程序。

<datepicker>
</datepicker>

4. 通过传递以下道具来配置日期选择器组件:

odelValue: {
  type: [Date as new () => Date, String, Number],
},
value: {
  type: [Date as new () => Date, String, Number],
},
format: {
  type: [String, Function],
  default: 'dd MMM yyyy',
},
language: {
  type: String,
  default: 'en',
},
openDate: {
  validator: (val: Date): boolean => validateDateInput(val),
  type: Date as new () => Date,
},
minimumView: {
  type: String,
  default: 'day',
},
maximumView: {
  type: String,
  default: 'year',
},
name: {
  type: String,
},
id: {
  type: String,
},
dayCellContent: {
  type: Function,
},
fullMonthName: {
  type: Boolean,
},
disabledDates: {
  type: Object,
},
highlighted: {
  type: Object,
},
placeholder: {
  type: String,
},
inline: {
  type: Boolean,
},
calendarClass: {
  type: [String, Object, Array],
},
inputClass: {
  type: [String, Object, Array],
},
wrapperClass: {
  type: [String, Object, Array],
},
mondayFirst: {
  type: Boolean,
},
clearButton: {
  type: Boolean,
},
clearButtonIcon: {
  type: String,
},
calendarButton: {
  type: Boolean,
},
calendarButtonIcon: {
  type: String,
},
calendarButtonIconContent: {
  type: String,
},
addBootstrapClass: {
  type: Boolean,
},
initialView: {
  type: String,
},
disabled: {
  type: Boolean,
},
required: {
  type: Boolean,
},
typeable: {
  type: Boolean,
},
useUtc: {
  type: Boolean,
},
hideInput: {
  type: Boolean,
  default: true,
},
preventDisableDateSelection: {
  type: Boolean,
  default: true,
},
iconColor: {
  default: 'black',
  type: String,
},
iconHeight: {
  default: 16,
  type: [String, Number],
},
iconWidth: {
  default: 16,
  type: [String, Number],
},
theme: {
  default: 'green',
  type: String,
},