vue3+element plus+ts的日期控件的选择时间范围

最新推荐文章于 2024-06-20 16:31:05 发布

active_lm

最新推荐文章于 2024-06-20 16:31:05 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/active_lm/article/details/125717731

版权

封装日期时间限制控件，文件放在interface/index.ts文件夹里；

// 封装的日期禁用控件。interface/index.ts
import {toRefs} 'vue';

export interface ClassifyDate {
    startDate:any;
}

/**
    @description: 判断今年是闰年还是平年。闰年366天 平年365天
    @return {*}
**/
const getDay = () => {
    const years = new Date().getFullYear();
    if ((years % 4 === 0 && years % 100 === 0) || years % 400 === 0) {
        return 366;
    } else {
        return 365;
    }
};

/**
   @description: 日期控件的封装
   @param {number} day // 日期控件限制时间跨度，非必穿，默认一年     
    @return {*}
**/
export const useDatePicker = (day:number = getDay()) => {
    const state = reactive<ClassifyDate>({
        startDate: null, // 日期选择的开始时间
    })；

    //获取点击开始的时间
    const calendarChange = (dates:any) => {
        const hasSelectDate = dates !== null &&