插件名称 | 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,
},