美文网首页
date-picker 时间范围选择器限制可选跨度

date-picker 时间范围选择器限制可选跨度

作者: ce048d2693f5 | 来源:发表于2021-11-04 11:59 被阅读0次

    1、基本配置

    <el-date-picker

                v-model="statisticsTime"

                :picker-options="pickerOptions"

                @focus="dateFocus"

                type="daterange"

                format="yyyy-MM-dd"

                value-format="yyyy-MM-dd"

                range-separator="至"

                start-placeholder="开始日期"

                end-placeholder="结束日期">

              </el-date-picker>

    重点配置

                :picker-options="pickerOptions"

                @focus="dateFocus"

                data() {

                    pickerOptions: {

                            onPick: ({maxDate, minDate}) => {

                                  this.minDate = '';

                                  this.minDate = minDate;

                            },

                            disabledDate: (time) => {

                                  if(!this.minDate) return time.getTime() > Date.now();

                                  let startDate = dayjs(this.minDate).subtract(12, "month");

                                  let endDate = dayjs(this.minDate).add(12, "month");

                                  endDate = endDate <= Date.now() ? endDate : Date.now();

                                  return time.getTime() > endDate || time.getTime() < startDate;

                            }

              },

    }

    dateFocus() {

          this.minDate = "";

        },

    相关文章

      网友评论

          本文标题:date-picker 时间范围选择器限制可选跨度

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