插件名称 | vue3-date-time-picker |
---|---|
发布时间 | 2021年9月4日 |
插件作者 | Vuepic |
vue3-date-time-picker
一个 Vue。3 个组件,用于在您的应用中创建日期选择器、时间选择器和日期范围选择器。
# 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 },