Vue禁止选择以后的日期或者默认显示某个日期

Jamie Chyi

已于 2023-03-10 16:38:01 修改

阅读量432

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-02-10 17:31:31 首次发布

本文链接：https://blog.csdn.net/qijing19991210/article/details/128974306

vue 专栏收录该内容

15 篇文章

订阅专栏

该代码段展示了一个Vue.js组件，使用el-date-picker限制用户只能选择当前日期之前的日期，并通过getDefaultDay方法设置默认选中当前日期的前n天。通过v-model绑定statDate，disabledDate函数阻止选择未来日期，pickerOptions配置了格式和禁用日期逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

            <el-date-picker style="width: 100%"
                            v-model="form.statDate"
                            type="date"
                            :editable="false"
                            :clearable="false"
                            format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择数据日期">
            </el-date-picker>

  data() {
    return {
      pickerOptions: {
        // 不能选择以后的日期 yyyy-MM-dd
        disabledDate(time) {
          // return time.getTime() > Date.now() - n * 24 * 60 * 60 * 1000; n等于减去多少天
          let currentTime = new Date();
          currentTime.setTime(currentTime.getTime());
          let month = currentTime.getMonth() + 1;
          let date = currentTime.getDate();
          let fullMonth = month < 10 ? '0' + month : month;
          let fullDay = date < 10 ? '0' + date : date;
          let baseTime = new Date(
              currentTime.getFullYear() + '-' + fullMonth + '-' + fullDay,
          );
          return time.getTime() > baseTime.getTime();
        }
      }
    }
  }

    //默认选中当前日期的前n天日期 yyyy-MM-dd 形式
    getDefaultDay() {
       // 或者 new Date(new Date().getTime() - n * 24 * 60 * 60 * 1000),
      const date = new Date();
      date.setTime(date.getTime()-3600 * 1000 * 24 * n);
      let dateDate = date;
      let month = dateDate.getMonth() + 1;
      let fullMonth = month < 10 ? '0' + month : month;
      let day =
          dateDate.getDate() < 10 ? '0' + dateDate.getDate() : dateDate.getDate();
        // 赋值即可
      this.form.statDate =
          dateDate.getFullYear() + '-' + fullMonth + '-' + day;
    }