a-range-picker时间选择器限制时间

弈瑾兮

于 2024-09-11 18:20:09 发布

阅读量253

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/m0_61620663/article/details/142146972

版权

时间选择器做限制主要用到的参数是disabledDate

这里要用到moment插件，大家自行下载， npm i moment

JS：

一、限制只能选明天及之后的日期（今天不可选中）

import moment from 'moment' //引入moment插件

//方法

methods: {

disabledDate (current) {

return current && current < moment().endOf('day')

}

二、限制只能选今天及之后的日期（今天可选中）

disabledDate (current) {

return current && current < moment().subtract(1, 'days').endOf('day')

}

三、限制只能选昨天及之前的日期（今天不可选中）

disabledDate (current) {

return current && current > moment().subtract(1, 'days').endOf('day')

}

四、限制只能选今天及之前的日期（今天可选中）

disabledDate (current) {

return current && current > moment().endOf('day')

}

注解：其中subtract 是 moment 库提供的一个方法，用于从指定的时间点中减去一段时间。

moment().subtract(1, 'days') 表示从当前时间 moment() 中减去 1 天。这个方法的第一个参数是时间的数量，第二个参数是时间的单位（在这个例子中是 'days'，表示天）。

如需将这个时间点的结束时间（即一天的最后一刻）进行比较，endOf('day') 用于将时间点调整到当天的结束时间（23:59:59.999）。

所以 subtract(1, 'days').endOf('day') 的意思是获取当前时间的前一天的结束时间。这个时间点会被用来判断 current 是否在这个时间点之后。

disabledDate 函数的逻辑是：如果 current 是有效的并且 current 时间点晚于前一天的结束时间，那么这个日期就会被禁用。

事例：

<template> 
    <div> 
        <a-range-picker :disabled-date="disabledDate" />//时间选择器做限制主要用到的参数是disabledDate 
    </div> 
</template> 

import moment from 'moment' //引入moment插件 

methods: { //限制只能选今天及之前的日期（今天可选） 
    disabledDate (current) { 
        return current && current > moment(this.currentDate).endOf('day') 
    } 
}