element的DateTimePicker 日期时间选择器怎么限制只能选择某个时间段?只能选择一个月?其它时间不能选择。

项目场景:

我们在使用element的DateTimePicker 日期时间选择器的时候,有时候会限制范围,比如只能选择一个月的时间,这时候需要对选择的范围进行限制。

element的DateTimePicker 日期时间选择器怎么限制只能选择某个时间段?只能选择一个月?其它时间不能选择。_第1张图片


实现方案:

我们看element官网我们发现可以用picker-options来对其限制,实现方法如下:

<el-date-picker
   v-model="loggerQueryData.operateTime"
   type="datetimerange"
   start-placeholder="开始时间"
   end-placeholder="结束时间"
   @change="onChangeTime('picker')"
   :picker-options="pickerOptions">
</el-date-picker>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          let now = new Date();   //获取此时的时间
          let nowData = new Date(  //获取此时年月日的后一天
            now.getFullYear(),
            now.getMonth(),
            now.getDate() + 1 //获取明天
          );
          let oneMonthAgo = new Date(  //获取一个月之前的时间
            now.getFullYear(),
            now.getMonth() - 1,  //获取上一个月
            now.getDate() + 1   //将多算的一天减掉
          );
         
          return (
            time.getTime() > nowData.getTime() - 1000  //可以选择到今天的xxx:xxx:xxx:23:59:59,只有的全部disabled
            || time.getTime() < oneMonthAgo.getTime()  //小于一个月的全部disabled掉
          );
        }
      },
    }
  }
}

效果图如下:
element的DateTimePicker 日期时间选择器怎么限制只能选择某个时间段?只能选择一个月?其它时间不能选择。_第2张图片

你可能感兴趣的:(element-ui,elementui,javascript)