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()
          );
        },
      };
    },
    
}
相关推荐
Angel_girl31912 分钟前
vue项目使用svg图标
前端·vue.js
難釋懷16 分钟前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo18 分钟前
Ajax入门
前端·ajax·okhttp
爱生活的苏苏41 分钟前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪43 分钟前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星1 小时前
Chrome书签的导出与导入:步骤图
前端·chrome
贩卖纯净水.1 小时前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁1 小时前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm
夏日米米茶1 小时前
Windows系统下npm报错node-gyp configure got “gyp ERR“解决方法
前端·windows·npm
且白2 小时前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器