饿了么时间选择器限制时间区域_饿了么日期选择库根据一季度限制选择范围-优快云博客

本文链接：https://blog.youkuaiyun.com/yixiaojing527/article/details/128397394

本文介绍如何在 Vue 项目中使用 Element UI 的日期选择器，并设置 disabledDate 功能，以确保时间范围限制在特定时间段内，如只允许选择2022年3月25日之后的时间。通过解析查询参数动态调整禁用日期策略。

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

<el-date-picker
    v-model="value1"
    type="datetimerange"
    :picker-options="pickerOptions"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
>
</el-date-picker>
 
data() {
    return {
        value1: '',
        pickerOptions: {
        disabledDate: time => {
                return time.getTime() > new Date().getTime() || time.getTime() < 1648137600000
            },
        },
    }
}

或者项目数据(有this情况)写入计算属性里
  computed: {
    pickerOptions(){
       const query = this.$route.query
      return {disabledDate(time) {
          const s =new Date(JSON.parse( query.applyTimeRang)[0])
          const e =new Date(JSON.parse( query.applyTimeRang)[1])
          console.log(s,e,'se');
          // return time.getTime() > s && time.getTime() < e
          return time.getTime() < s || time.getTime() > e
            // return time.getTime() < Date.now() - 8.64e7; //只能选择今天及今天之后的日期
            //return time.getTime() < Date.now() - 8.64e6; //只能选择今天之后的日期，今天的日期也不能选
          }
        }
      },//播出时间受"可申请时间范围"限制
  },

1. 2022-03-25 时间戳 = 1648137600000，笔者此处简写，项目中可从变量中获取

2. disabledDate 的参数 time 是禁用时间，可以获取时间戳进行比较，筛选范围