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()
          );
        },
      };
    },
    
}
相关推荐
LinXunFeng8 小时前
Obsidian - 使用 Share Note 分享笔记并自部署
前端·笔记·github
乘风gg11 小时前
为什么AI 时代来临,大部分人吃不到红利
前端·ai编程·claude
恋猫de小郭12 小时前
Android 限制侧载新进展,谷歌联合国内厂商推验证计划
android·前端·flutter
IT_陈寒12 小时前
Redis内存爆了,原来我漏掉了这个致命配置
前端·人工智能·后端
恋猫de小郭12 小时前
解读 Android 17 全新内存限制,有没有“豁免”后门?
android·前端·flutter
Hyyy13 小时前
理解LLM的基本工作原理:预训练、微调、推理的区别
前端
Gatlin14 小时前
前端逆向与反逆向:一场猫鼠游戏的底层逻辑与实战
前端
代码煮茶14 小时前
React 组件封装方法论 —— 以 Todo App 为例
javascript·react.js
Pedantic14 小时前
本地通知(Local Notifications)学习笔记
前端
任沫14 小时前
Agent之Function Call
javascript·人工智能·go