Vue.js 3日期选择器组件，使您可以轻松地从外观清晰的日历界面中选择日期。

特征：

• 可以选择的最小/最大日期。
• 月/年/日视图。
• 允许您禁用日期。
• 易于使用自己的CSS设置样式。

安装和下载：

# NPM
$ npm i vue3-datepicker

如何使用它：

1.导入并注册组件。

import Datepicker from 'vue3-datepicker'
import { ref } from 'vue'
const picked = ref(new Date());

2.将日期选择器组件添加到模板。

<template>
  <datepicker v-model="picked" />
</template>

3.可用的组件道具来自定义日期图标。

placeholder: {
  type: String,
  default: '',
},
/**
 * `v-model` for selected date
 */
modelValue: {
  type: Date as PropType<Date>,
  required: false,
},
/**
 * Dates not available for picking
 */
disabledDates: {
  type: Object as PropType<{ dates?: Date[] }>,
  required: false,
},
/**
 * Upper limit for available dates for picking
 */
upperLimit: {
  type: Date,
  required: false,
},
/**
 * Lower limit for available dates for picking
 */
lowerLimit: {
  type: Date,
  required: false,
},
/**
 * View on which the date picker should open. Can be either `year`, `month`, or `day`
 */
startingView: {
  type: String as PropType<'year' | 'month' | 'day'>,
  required: false,
  default: 'day',
  validate: (v: unknown) =>
    typeof v === 'string' && ['day', 'month', 'year'].includes(v),
},
/**
 * `date-fns`-type formatting for a month view heading
 */
monthHeadingFormat: {
  type: String,
  required: false,
  default: 'LLLL yyyy',
},
/**
 * `date-fns`-type formatting for the month picker view
 */
monthListFormat: {
  type: String,
  required: false,
  default: 'LLL',
},
/**
 * `date-fns`-type formatting for a line of weekdays on day view
 */
weekdayFormat: {
  type: String,
  required: false,
  default: 'EE',
},
/**
 * `date-fns`-type format in which the string in the input should be both
 * parsed and displayed
 */
inputFormat: {
  type: String,
  required: false,
  default: 'yyyy-MM-dd',
},
/**
 * [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage).
 * Used in string formatting (see default `monthHeadingFormat`)
 */
locale: {
  type: Object as PropType<Locale>,
  required: false,
},
/**
 * Day on which the week should start.
 *
 * Number from 0 to 6, where 0 is Sunday and 6 is Saturday.
 * Week starts with a Monday (1) by default
 */
weekStartsOn: {
  type: Number,
  required: false,
  default: 1,
  validator: (value: any) => [0, 1, 2, 3, 4, 5, 6].includes(value),
},
/**
 * Disables datepicker and prevents it's opening
 */
disabled: {
  type: Boolean,
  required: false,
  default: false,
},

变更日志：

v0.2.5 (07/02/2021)

• 固定样式变量未正确应用
• 添加了可清除、可键入、已禁用

v0.2.4 (02/05/2021)

• 通过允许属性失败行为启用正确的输入样式。