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

首先来一个日期组件,设置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;
          }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容