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()
          );
        },
      };
    },
    
}
相关推荐
Code知行合壹3 分钟前
Vue项目中SVG图标
前端·vue.js
SJLoveIT6 分钟前
【安全研发】CSRF (跨站请求伪造) 深度复盘与防御体系
前端·安全·csrf
pas13615 分钟前
34-mini-vue 更新element的children-双端对比diff算法
javascript·vue.js·算法
小二·15 分钟前
Python Web 开发进阶实战:数字孪生平台 —— 在 Flask + Vue 中构建实时物理世界镜像
前端·vue.js·python
CHU72903517 分钟前
安心陪伴,便捷就医:陪诊代办小程序的温暖设计
前端·小程序·php
ashcn200124 分钟前
websocket测试通信
前端·javascript·websocket
weixin_4046793127 分钟前
edge alt tab怎么关
前端·edge
吃吃喝喝小朋友38 分钟前
JavaScript文件的操作方法
开发语言·javascript·ecmascript
Trae1ounG39 分钟前
模块间通信解耦
javascript
2501_9445264241 分钟前
Flutter for OpenHarmony 万能游戏库App实战 - 知识问答游戏实现
android·开发语言·javascript·python·flutter·游戏·harmonyos