element el-date-picker 日期组件置灰指定日期范围、禁止日期范围日期选择

JS如何将当前日期或指定日期转时间戳_javascript技巧_脚本之家

小于指定日期前的日期置灰

比如这里 指定日期是 2024-02-20 10:48:15

disabledDate(time) time是一个函数提供的时间用于比较 他是一个时间戳↓ 理解为我们想要置灰的时间

time.getTime() <= timeStamps- 1 * 24 * 60 * 60 * 1000 表示小于指定时间置灰

time.getTime() > Date.now() //表示大于当前日期(电脑时间) 置灰

复制代码
 data() {
    return {
      pickerOptionsStart: {
        disabledDate: "",
      },
      pickerOptionsEnd: {
        disabledDate: "",
      },
    };
  },


let timeStamps1 = Date.parse('2024-02-20 10:48:15'); //转时间戳
that.disabledDateMethod(timeStamps1);

methods:{
    disabledDateMethod(timeStamps) {
      this.pickerOptionsStart = {
        disabledDate(time) {
          console.log(time,'time')
          return (
            time.getTime() <= timeStamps- 1 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          );
        },
      };
    },
    //小于当前时间减14天的时候置灰
    disabledDateMethodMore14() {
      this.pickerOptionsStart = {
        disabledDate(time) {
          return (
            time.getTime() < Date.now() - 15 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          );
        },
      };
    },
    
}
相关推荐
@菜菜_达7 分钟前
前端 HTML 入门(标签)
前端·html
智航GIS8 分钟前
7.1 自定义函数
前端·javascript·python
BlackWolfSky18 分钟前
React中文网课程笔记1—快速入门
前端·笔记·react.js
A_one201023 分钟前
利用npm内置命令构建脚本工具
前端·npm·node.js
哔哩哔哩技术27 分钟前
2025年哔哩哔哩技术精选技术干货
前端·后端·架构
霍理迪28 分钟前
CSS布局方式——定位
前端·css
星光不问赶路人30 分钟前
TypeScript 架构实践:从后端接口到 UI 渲染数据流的完整方案
前端·vue.js·typescript
ttyyttemo31 分钟前
Dagger技术的使用学习
前端
IT_陈寒35 分钟前
Redis性能翻倍的5个关键策略:从慢查询到百万QPS的实战优化
前端·人工智能·后端
码界奇点44 分钟前
基于React与TypeScript的后台管理系统设计与实现
前端·c++·react.js·typescript·毕业设计·源代码管理