Element Plus 日期时间选择器DateTimePicker限制可选时间范围(包含时分秒)

需求:禁止选择当前日期前的时间;

日期禁选

DateTimePicker 日期时间选择器 | Element Plus
element-plus 去掉了element-ui的属性picker-options,判断日期是否被禁用 只能写在函数disabled-date里

时分秒的处理

时分秒的判断用到TimePicker 时间选择器的属性disabled-hours、disabled-minutes、disabled-seconds

TimePicker 时间选择器 | Element Plus

// html
<el-date-picker
    v-model="Time[1]"
    placeholder="结束时间"
    type="datetime"
    value-format="YYYY-MM-DD HH:mm:ss"
    :disabledDate="disabledDateFn"
    :disabled-hours="disabledHours"
    :disabled-minutes="disabledMinutes"
    :disabled-seconds="disabledSeconds"
    :default-time="new Date()"
/>

const disabledDateFn = (time: any) => {
  // 比当前时间小的时间禁用(返回false则禁用)
  return time.getTime() < Date.now() - 24 * 3600 * 1000;
};
// 处理时
const disabledHours = (c: any, g: any, j: any, k: any) => {
  const list = [];
  if (Time[1]) {
    let a: any = new Date(Time[1]).getTime();
    let b: any = dayjs(a).format("YYYY-MM-DD");
    let c: any = dayjs().format("YYYY-MM-DD");
    if (b === c) {
      for (let i = 0; i < 24; i++) {
        // 限制之前 < 之后 > ,下面同理
        if (new Date().getHours() <= i) continue;
        list.push(i);
      }
    }
  }
  return list;
};
// 处理分
const disabledMinutes = (hour: number, role: string, comparingDate?: any) => {
  const list = [];
  if (Time[1]) {
    let a: any = new Date(Time[1]).getTime();
    let b: any = dayjs(a).format("YYYY-MM-DD");
    let c: any = dayjs().format("YYYY-MM-DD");
    let d: any = dayjs().format("H");
    // 限制之前 < 之后 > ,下面同理
    if (b === c && hour <= d) {
      for (let i = 0; i < 60; i++) {
        if (new Date().getMinutes() <= i) continue;
        list.push(i);
      }
    }
  }
  return list;
};
// 处理秒
const disabledSeconds = (
  hour: number,
  minute: number,
  role: string,
  comparingDate?: any,
) => {
  const list = [];
  if (Time[1]) {
    let a: any = new Date(Time[1]).getTime();
    let b: any = dayjs(a).format("YYYY-MM-DD");
    let c: any = dayjs().format("YYYY-MM-DD");
    let d: any = dayjs().format("H");
    let m: any = dayjs().format("m");
    // 限制之前 < 之后 > ,下面同理
    if (b === c && hour <= d && minute <= m) {
      for (let i = 0; i < 60; i++) {
        if (new Date().getSeconds() <= i) continue;
        list.push(i);
      }
    }
  }
  return list;
};


 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值