elmentplus中el-date-picker实现禁选与默认显示

最新推荐文章于 2024-06-28 13:39:14 发布

徐小志~

最新推荐文章于 2024-06-28 13:39:14 发布

阅读量616

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_46561492/article/details/130010979

版权

本文展示了如何在Vue.js应用中配置el-date-picker组件，用于选择日期范围并限制可选日期。通过`disabledDate`函数禁止选择前三个月之前的日期，同时设置了默认显示为最近三个月的时间范围。`defaultTime`用于设定默认时间，`threeBefore`函数计算前三个月的日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

template

<el-date-picker 
 :disabledDate="disabledDateFun" 
 clearable 
 v-model="state.searchtime"
 type="daterange"
 unlink-panels 
 range-separator="~" 
 start-placeholder="开始日期" 
 end-placeholder="结束日期"
 value-format="YYYY-MM-DD HH:mm:ss" 
 :shortcuts="shortcuts" 
 :default-time="defaultTime"
 size="default" />

script

const state = reactive({
    searchtime: "",
});

设置时间格式【00:00:00,23:59:59】

const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])

前三个月

const threeBefore = () => {
    let date = new Date()
    date.setMonth(date.getMonth() - 3)
    var pastMonth = date.getMonth() + 1
    var pastDay = date.getDate()
    if (pastMonth >= 1 && pastMonth <= 9) { pastMonth = '0' + pastMonth }
    if (pastDay >= 0 && pastDay <= 9) { pastDay = '0' + pastDay }
    return date.getFullYear() + '-' + pastMonth + '-' + pastDay + ' 00:00:00'
}

设置默认显示时间

const defaultDate = () => {
    // 获取新的时间
    let date = new Date()
    let year = date.getFullYear().toString()//年份
    let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()//获取月份，由于月份从0开始，此处要加1
    let da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString() //获取天使用三目运算拼接
    let str = date.toTimeString().substring(0, 8); //获取时分秒
    let end = year + '-' + month + '-' + da + ' ' + str  //当天
    let start = year + '-' + month + '-01' + ' 00:00:00'    //当月第一天
    state.searchtime = [start , end] //默认显示本月
    state.searchtime = [threeBefore(), end] //默认显示最近三个月
}

在这里插入图片描述

禁止选择三个月前的日期

const disabledDateFun = (time) => {
    return time.getTime() < new Date(threeBefore()).getTime()
};

在这里插入图片描述

页面加载


onMounted(() => {defaultDate()});