Vue3简洁的日期选择器组件

 website 下载

描述：

适用于Vue3应用程序的简单实用的日期选择器组件。

使用方法

1.导入DatepickerLite组件。

import { defineComponent } from "vue";
import DatepickerLite from "vue3-datepicker-lite";

2.将datepicker-lite组件添加到模板。

<datepicker-lite />

3.注册组件并完成。

export default defineComponent({
  name: "App",
  components: {
    DatepickerLite,
  }
});

4.组件默认配置项。

idAttr: {
  type: String,
},
nameAttr: {
  type: String,
},
classAttr: {
  type: String,
},
valueAttr: {
  type: String,
  default: "",
},
yearMinus: {
  type: Number,
  default: 0,
},
from: {
  type: String,
  default: "",
},
to: {
  type: String,
  default: "",
},
disabledDate: {
  type: Array,
  default: () => {
    return [];
  },
},
locale: {
  type: Object,
  default: () => {
    return {
      format: "{1}/{2}/{3}",
      weekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      todayBtn: "Today",
      clearBtn: "Clear",
      closeBtn: "Close",
    };
  },
},

5.每次更改日期都会触发一个事件。

changeEvent: (value) => {
  console.log(value + " selected!");
}