vue3-date-time-picker

一个 Vue。3 个组件，用于在您的应用中创建日期选择器、时间选择器和日期范围选择器。

特征：

• 黑暗与光明主题。
• SSR 支持。
• 多种语言。
• 周数。
• 高度可定制。

安装和下载：

# Yarn
$ yarn add vue3-date-time-picker

# NPM
$ npm i vue3-date-time-picker --save

如何使用它：

1. 导入并注册组件。

import Datepicker from 'vue3-date-time-picker';
import 'vue3-date-time-picker/dist/main.css'

//全局
import { createApp } from "vue";
import App from './App.vue';
const app = createApp(App);
app.component('Datepicker', Datepicker);
app.mount('#app');

//  本地
<template>
  <Datepicker v-model="date"></Datepicker>
</template>
<script>
  import Datepicker from 'vue3-date-time-picker';
  import 'vue3-date-time-picker/dist/main.css'
  export default {
    components: { Datepicker },
    data() {
      return {
        date: null,
      };
    }
  }
</script>

// 使用 Composition API 
<template>
  <Datepicker v-model="date"></Datepicker>
</template>
<script>
  import { ref } from 'vue';
  import Datepicker from 'vue3-date-time-picker';
  import 'vue3-date-time-picker/dist/main.css'
  export default {
    components: { Datepicker },
    setup() {
      const date = ref();
        return {
          date
      }
    }
  };
</script>

2.默认道具。

uid: { type: String as PropType<string>, default: 'dp' },
is24: { type: Boolean as PropType<boolean>, default: true },
enableTimePicker: { type: Boolean as PropType<boolean>, default: true },
locale: { type: String as PropType<string>, default: 'en-US' },
range: { type: Boolean as PropType<boolean>, default: false },
modelValue: { type: [String, Date, Array] as PropType<string | Date>, default: null },
position: { type: String as PropType<OpenPosition>, default: OpenPosition.center },
placeholder: { type: String as PropType<string>, default: null },
weekNumbers: { type: Boolean as PropType<boolean>, default: false },
dark: { type: Boolean as PropType<boolean>, default: false },
hoursIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
minutesIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
hoursGridIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
minutesGridIncrement: { type: [String, Number] as PropType<string | number>, default: 5 },
minDate: { type: [Date, String] as PropType<Date | string>, default: null },
maxDate: { type: [Date, String] as PropType<Date | string>, default: null },
minTime: { type: Object as PropType<ITimeRange>, default: () => ({}) },
maxTime: { type: Object as PropType<ITimeRange>, default: () => ({}) },
weekStart: { type: [String, Number] as PropType<string | number>, default: 1 },
disabled: { type: Boolean as PropType<boolean>, default: false },
readonly: { type: Boolean as PropType<boolean>, default: false },
weekNumName: { type: String as PropType<string>, default: 'W' },
format: {
  type: [Object, Function] as PropType<FormatOptions | ((date: Date | Date[]) => string)>,
  default: () => ({}),
},
previewFormat: {
  type: [Object, Function] as PropType<FormatOptions | ((date: Date | Date[]) => string)>,
  default: () => ({}),
},
inputClassName: { type: String as PropType<string>, default: null },
menuClassName: { type: String as PropType<string>, default: null },
calendarClassName: { type: String as PropType<string>, default: null },
calendarCellClassName: { type: String as PropType<string>, default: null },
hideInputIcon: { type: Boolean as PropType<boolean>, default: false },
state: { type: Boolean as PropType<boolean>, default: null },
clearable: { type: Boolean as PropType<boolean>, default: true },
closeOnScroll: { type: Boolean as PropType<boolean>, default: false },
autoApply: { type: Boolean as PropType<boolean>, default: false },
filters: { type: Object as PropType<IDateFilter>, default: () => ({}) },
disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false },
yearRange: { type: Array as PropType<number[]>, default: () => [1970, 2100] },
disabledDates: { type: Array as PropType<Date[] | string[]>, default: () => [] },
inline: { type: Boolean as PropType<boolean>, default: false },
selectText: { type: String as PropType<string>, default: 'Select' },
cancelText: { type: String as PropType<string>, default: 'Cancel' },
autoPosition: { type: Boolean as PropType<boolean>, default: true },