Element-UI饿了么时间组件控件按月份周日期，开始时间结束时间范围限制参数

素颜马尾好姑娘i 2023-03-12 10:54 71阅读 0赞

**在日常开发中，我们会遇到一些情况，在使用Element-UI 限制用户的日期时间范围的选择控制（例如：查询消息开始和结束时间，需要限制不能选择今天之后的时间）。**

**看了网上的一些文档，零零散散、各式各样的都是简单的吧代码列出来，并没有详细的说明各参数的含义，用途，对新手及其不友好。**

我们这里使用的是 DatePicker 日期选择器: [Element官网日期控件地址][Element]，新手对于日期使用限制时间，可能不太理解写限制规则的方式。接下来我们将详细的解读日期限制的参数设置。全方位的透彻理解怎么限制日期控件的时间。

### 官方文档日期限制说明： ###

![format_png][]

###  ###

### 先看饿了么这里的官方文档，这里写的很简洁，使用 **disabledDate** 参数来限制， **disabledDate** 是一个函数，函数内有一个形参，以下是简单伪代码示例 ###

// HTML  首先在日期选择器加上:picker-options属性
    // 例如：
    
    <el-date-picker 
        v-model="endDate" 
        :picker-options="disabledDate"
    >
    </el-date-picker>
    
    
    // Vue 中 data里面写入相关参数
     disabledDate: (time) => {
        
    
        return time.getTime() < new Date().getTime() 
    
    　　// 此处 time 的形参，time默代表选择器的每一个当前时间，用于判断这些时间是否可选.
    　　// 通过 return time > 某个时间 或者 return time  < 某个时间来限制时间的选择范围.
    　　// 记得时间需要使用 .getTime() 转换成 毫秒.
    })

以上是个简单的示例，相信仔细阅读后的同学，现在一定已经了解时间限制的方法，很简单其实就是通过设置 **disabledDate** 的形参 **time,** **return** 出一个大于或者小于的公式，即可来设置日期的使用范围。

**接下来，我们使用两个详细的案列来更清晰解读一下，日期控件的使用方法、**

## 两个日期联动控制（限制开始和结束时间为最近一个月） ##

其实思路很简单，开始时间显示当前时间为最大，结束时间通过拿到开始时间的数据，限制最大为 开始时间或者当前时间即可；下面详细代码解读；

**Tip:** 日期控件需要的参数是 “2020-12-31”这种格式，但是在限制时间的函数使用 **“<”、“>”、">="、“<=”**，这些比较方法是，需要使用**.getTime()**转化成毫秒，否则“2020-12-31”这种格式是无法对比的哦~

// HTML 代码
    
    <el-date-picker
       v-model="value1"
       placeholder="开始时间"
       :picker-options="start">
    </el-date-picker>
    <el-date-picker
       v-model="value2"
       placeholder="结束时间"
       :picker-options="end">
    </el-date-picker>
    
    
    
    // Vue 中 data 中代码
        value1: '2020-12-31',
        value2: '2020-12-31',
        start: {
           disabledDate: (time) => {
             // 此处为30天时间的毫秒数
             const space = 30 * 24 * 3600 * 1000
             // 设置最小时间毫秒数，当前时间减去30天的毫秒数
             const minTime = new Date().getTime() - space
             // 设置最大时间毫秒数，当前时间加上今天天的毫秒数
             const maxTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
             // return 一个公式 最大为当前时间，最小为30天前
             return time.getTime() < minTime || time.getTime() > maxTime
           }
        },
        end: {
          disabledDate: (time) => {
            // 此处为30天时间的毫秒数
            const space = 30 * 24 * 3600 * 1000
            // 拿到开始时间的日期
            const  startTime = value1
            // 设置当前选择时间
            const startTimes = startTime || new Date().getTime() - space
            // 设置最小选择时间，dateRange为当前时间需要手动方法获取当前时间，下方代码有展示获取当前时间的方式
            const minTime = (startTimes === dateRange) ? new Date(startTimes).getTime() : new Date(startTimes).getTime() - (1 * 24 * 3600 * 1000)
            // 设置最大选择时间为今天
            const maxTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
            // 这里依旧是return 一个公式 最大为今天或者开始框中选择的时间，最小为30天前
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }, 
    
    
    // 获取当前时间的函数写法
    
     var dd = new Date()
     dd.setDate(dd.getDate() + addDate) // 获取第addDate天后的日期
     var y = dd.getFullYear()
     var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
     var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()         
     // 获取当前几号，不足10补0
     let dateRange = y + '-' + m + '-' + d

**　授人以鱼不如授人以渔，希望大家可以更好地去理解，这个日期控件限制方法的使用，而不是一味地去复制相关的代码，短时间内复制可能更快，但是想要提高自己就要不断地去理解每一个参数的设计、用法、理念。**

### **　**如果大家有任何疑问即可留言反馈，会在第一时间回复反馈，谢谢大家！ ###

### 　本文为Tz张无忌原创文章，读后有收获可以右侧边栏请作者喝咖啡，转载请文章注明出处：[https://www.cnblogs.com/zhaohongcheng/][https_www.cnblogs.com_zhaohongcheng] ###

[Element]: https://element.eleme.cn/#/zh-CN/component/date-picker
[format_png]: /images/20230312/c92d8d70531a4d9ea7a78577b2e1ead0.png
[https_www.cnblogs.com_zhaohongcheng]: https://www.cnblogs.com/zhaohongcheng/