神采飞阳

 

ant组件DatePicker 日期选择框动态设置日期可选择范围不超过31天

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  <a-range-picker
      v-model:value="searchData.date"
      :format="'YYYY-MM-DD'"
      :placeholder="['开始日期', '结束日期']"
      :allow-clear="false"
      :disabled-date="disabledDate"
      @calendarChange="calendarChange"
      @blur="blurDate"
    />
   
 
const startDate = ref<any>();
const calendarChange = (dates) => {
  startDate.value = dates;
};
const disabledDate = (current: Moment) => {
  if (startDate.value && startDate.value[0]) {
    return (
      current < moment(startDate.value[0]).subtract(31, "days") ||
      current > moment(startDate.value[0]).add(31, "days")
    );
  } else {
    return false;
  }
};
const blurDate = () => {
  startDate.value = undefined;
};       

  首先calendarChange 函数获取到时间选择框的点击时间的变化并回调数据存入startDate中,然后disabledDate 函数根据moment(startDate.value[0])获取到选择的开始时间,并根据该时间向前后各扩大31天,超出31天的时间禁用。最后使用blurDate函数在失去焦点的时候重置startDate数据,使下次再选择时间的时候对开始时间不限制选择范围

posted on   神采飞阳  阅读(1590)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了

导航

统计

点击右上角即可分享
微信分享提示