elementui 日期选择器固定日期范围

空谷幽兰~~

已于 2022-07-21 15:34:02 修改

阅读量1.2k

点赞数

文章标签： elementui vue.js 前端

于 2022-07-21 15:30:22 首次发布

本文链接：https://blog.csdn.net/weixin_50070859/article/details/125913382

版权

该博客内容展示了如何在前端开发中使用El-DatePicker组件，限定用户只能选择周日作为截止日，并设置一个以一周为时间跨度的选择时间段。通过`disabledDate`属性，确保起始日始终在截止日之前，并且选择的日期范围在结束日期的前一周内。

摘要由CSDN通过智能技术生成

固定只能选择周几的数据，我这里以周日为例

 <el-form-item label="截止日：">
                <el-date-picker v-model="brandForm.endDate"
                        :picker-options="pickerOptionsEnd"
                           clearable
                           value-format="yyyy-MM-dd"
                           placeholder="请选择截止日">
                </el-date-picker>
 </el-form-item>
 export default {
  data () {
	   return {
	      pickerOptionsEnd: {
	        disabledDate: (time) => {
	          return time.getDay() !== 0 // 只能选择周日
	        }
	    }
    }
  }

在这里插入图片描述

固定选择时间段内，我这里以一周为准

 <el-form-item label="起始日：">
                <el-date-picker v-model="brandForm.startDate"
                        :picker-options="pickerOptionsStart"
                           clearable
                           value-format="yyyy-MM-dd"
                           placeholder="请选择截止日">
                </el-date-picker>
 </el-form-item>
 <el-form-item label="截止日：">
                <el-date-picker v-model="brandForm.endDate"
                        :picker-options="pickerOptionsEnd"
                           clearable
                           value-format="yyyy-MM-dd"
                           placeholder="请选择截止日">
                </el-date-picker>
 </el-form-item>
 export default {
  data () {
	   return {
	      pickerOptionsStart: {
        disabledDate: (time) => {
          let sevenDays = 7 * 24 * 3600 * 1000 // 7天
          if (this.brandForm.endDate) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              // 开始日期要在选择的结束日期之前,大于结束时间的日期不能选
              time.getTime() > new Date(this.brandForm.endDate).getTime() ||
              // 先选结束时间，在结束时间七天之前的不能选
              time.getTime() < new Date(this.brandForm.endDate).getTime() - sevenDays
            )
          }
          return time.getTime() > Date.now() - 8.64e6 // 今天及之前
        }
      },
      pickerOptionsEnd: {
         disabledDate: (time) => {
           let sevenDays = 6 * 24 * 3600 * 1000
          if (this.brandForm.startDate) {
            return (
             time.getTime() > Date.now() - 8.64e6 ||
              // 结束日期要在选择的开始日期之后,小于开始时间的日期不能选
              time.getTime() < new Date(this.brandForm.startDate).getTime() ||
              // 先选开始时间，在开始时间七天之后的不能选（因为包括自身这一天，所以是加上六天）
               time.getTime() > new Date(this.brandForm.startDate).getTime() + sevenDays
             )
          }
         return time.getTime() > Date.now() - 8.64e6 // 今天及之前
        }
      }
    }
  }