小小地踩个坑之Element-plus* 日期选择器限制范围

编程

发布日期: 2024-08-01

更新日期: 2024-08-01

文章字数: 587

阅读时长: 2 分

如果你专注在问题上，就看不到答案，要用不一样的视角和眼光来看待整个世界，去挖掘探索真相

一个特别简单的需求，满足一下需求即可。

页面初始化，日期范围是当前日期前30天至今天
用户打开面板的时候，限制解除，可以任选日期
用户选择了start日期后，开始限制前30天或者后30天

这种需求一抓一大把，就寻思着文档也没必要看了，直接chatgpt就行了，没想到搜出来了示例都用到了picker-options这个属性，在运行中，发现一直没生效，无奈选择打开官网，发现根本没有这个属性。那干脆自己写吧。

通过查阅文档，发现文档中的disabled-date，calendar-change，visible-change属性和事件可以满足我的需求。直接写。

<el-date-picker 
    v-model="searchData.DateRange" 
    :clearable="false"
    value-format="YYYY-MM-DD" 
    type="daterange" 
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :disabled-date="disabledDate"
    @calendar-change="calendarChange"
    @visible-change="visibleChange"
  />
 
const start = moment().subtract('30', 'days').format('yyyy-MM-DD');
const end = moment().format('yyyy-MM-DD');

const selectTime = ref([start, end]);
const searchData = {
  DateRange: [start, end]
},

const disabledDate = (time) => {
  // time 当前展示出来日历的日期
  const [start, end] = selectTime.value.map(date => new Date(date).getTime());
  const maxRange = 30 * 24 * 60 * 60 * 1000; // 限定30天， 24小时 * 60分钟 * 60秒 * 1000毫秒
  if (!start) return false;
  return time.getTime() > start + maxRange || time.getTime() < start - maxRange; 
  // 只能选择大于当前start30天或者小于start30天的日期
};

// 每次选择日期的时候，进行更新
function calendarChange(value) {
  selectTime.value = value;
}

// 面板隐藏或展示的时候清空，让用户可以再次毫无限制的选择日期
function visibleChange() {
  selectTime.value = []
}