美文网首页
element-ui日期组件设置日期选择范围

element-ui日期组件设置日期选择范围

作者: 丶Pal | 来源:发表于2019-03-14 16:47 被阅读0次

首先来一个日期组件,设置picker-options属性

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

在data中定义pickerOptions值,并给与disabledDate方法,此方法设置禁用状态,参数为当前日期,要求返回 Boolean。

pickerOptions:{
              disabledDate:(time) => {
                return this.dealDisabledDate(time)
              }
            }

然后在methods中写禁用日期的相关逻辑,下方逻辑为选择今天之前一个月的时间(包括今天)

dealDisabledDate (time) {
            // 一天的毫秒数 = 8.64e7  判断时在return处可进行加减
            let curDate = (new Date()).getTime();
            let day = 30 * 24 * 3600 * 1000;
            let dateRegion = curDate - day;
            return time.getTime() > Date.now() || time.getTime() < dateRegion;
          }

相关文章

网友评论

      本文标题:element-ui日期组件设置日期选择范围

      本文链接:https://www.haomeiwen.com/subject/bedcmqtx.html