Element DatePicker 日期最多选三十天

原创

MarsXHChang 2022-03-04 11:14:17 博主文章分类：vue ©著作权

文章标签 datepicker 日期选择三十天一个月最多 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者MarsXHChang的原创作品，请联系作者获取转载授权，否则将追究法律责任

<el-date-picker
  v-model="value"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions">
</el-date-picker>

data() {
    return {
      pickerOptions: {
        onPick: function({ minDate, maxDate }) {
          if (minDate && !maxDate) {
            const currentDateTimestamp = minDate.getTime();
            const minDateTimestamp = currentDateTimestamp - 3600 * 1000 * 24 * 30;
            const maxDateTimestamp = currentDateTimestamp + 3600 * 1000 * 24 * 30;
            this.disabledDate = date => {
              const dateTimestamp = date.getTime();
              return dateTimestamp <= minDateTimestamp || dateTimestamp >= maxDateTimestamp;
            };
          }
        }
      },
      value: ''
    };
  }
};