default-calendar v0.3.7

使用方法

全局引入

在 main.ts 中

import { DefaultComponents } from "default-calendar";
app.use(DefaultComponents());

type 为 DateTimePicker、DatePicker

<DefaultCalendar
	v-model="selectedTimeRange"
	type="DateTimePicker"
	@onClick="getSelectedTimeRange"
	:pickerOptions="pickerOptions"
	:selectOptions="selectOptions"
/>
<DefaultCalendar
	v-model="selectedTimeRange"
	type="DatePicker"
	@onClick="getSelectedTimeRange"
	:pickerOptions="pickerOptions"
	:selectOptions="selectOptions"
/>

const selectedTimeRange = ref<[Date, Date]>([
	new Date(2000, 10, 10, 10, 10),
	new Date(2000, 10, 11, 10, 10),
]);

const getSelectedTimeRange = (val: number[]) => {};

const pickerOptions = [
	{
		text: "最近一周",
		value: () => {
			const end = new Date().getTime();
			const start = new Date().getTime() - 3600 * 1000 * 24 * 6;
			return [start, end];
		},
	},
];

// 当timeType为Select时
const selectOptions = {
	start: "08:30",
	step: "00:15",
	end: "18:30",
};

type 为 DateTime、Date

<DefaultCalendar
	v-model="defaultValue"
	timeType="Select"
	type="DateTime"
	:picker-options="pickerOptions"
	:selectOptions="selectOptions"
	@onClick="getSelectedTime"
/>
<DefaultCalendar
	v-model="defaultValue"
	type="Date"
	:pickerOptions="pickerOptions"
	@onClick="getSelectedDate"
/>

// 默认时间应该于timeType类型相匹配
const defaultValue = ref(new Date(2000, 10, 10, 8, 30));
const pickerOptions = [
	{
		text: "今天",
		value: () => new Date().getTime(),
	},
	{
		text: "昨天",
		value: () => new Date().getTime() - 3600 * 1000 * 24,
	},
	{
		text: "一周前",
		value: () => new Date().getTime() - 3600 * 1000 * 24 * 7,
	},
];
const selectOptions = {
	start: "08:00",
	step: "00:15",
	end: "18:30",
};
const getSelectedTime = (val: number) => {
	console.log(val);
};

disabledDate 使用

// 只禁用这一天
const disabledDate = {
	type: "today",
	range: "2022-11-06 00:00:00",
};
// 禁用包括这一天之前的日期
const disabledDate = {
	type: "before",
	range: "2022-11-06 00:00:00",
};
// 禁用包括这一天之后的日期
const disabledDate = {
	type: "after",
	range: "2022-11-06 00:00:00",
};
// 禁用这个范围的日期
const disabledDate = {
	type: "range",
	range: ["2022-11-06 00:00:00", "2022-11-16 00:00:00"],
};

i18n 国际化

<DefaultCalendar
	v-model="defaultValue"
	type="DateTime"
	timeType="Select"
	:i18n="i18nGlobal"
	:picker-options="pickerOptions"
/>

const i18nGlobal = ref("zh");
// 使用vue-i18n需要国际化的内容需要写成函数形式
const pickerOptions = [
	{
		text: "today",
		value: () => new Date().getTime(),
	},
	{
		text: () => t("yestorday"),
		value: () => new Date().getTime() - 3600 * 1000 * 24,
	},
	{
		text: () => t("beforeWeek"),
		value: () => new Date().getTime() - 3600 * 1000 * 24 * 7,
	},
];