ElementUI日期时间选择器禁止此刻之前的所有时间选择(精确到,时、分、秒)、pickerOptions、日期选择器范围选择

elementUI日期时间选择器范围(精确到,时、分、秒。🈲️)

一、html

<el-date-picker
   v-model="record.createTime"
   :picker-options="pickerOptions"
   format="yyyy-MM-dd HH:mm:ss"
   type="datetime"
   placeholder="选择日期时间"
 />

在这里插入图片描述

二、data部分

pickerOptions: {
 disabledDate(time) {
     const dateTime = new Date()
     const startDateTime = dateTime.setDate(dateTime.getDate() - 1)
     const endDateTime = dateTime.setDate(dateTime.getDate() + 7)
     return (
       time.getTime() < new Date(startDateTime).getTime() ||
       time.getTime() > new Date(endDateTime).getTime()
     )
   },
   selectableRange:
   parseTime(new Date('2020-08-04 10:50:50'), '{hh}:{ii}:{ss}') + '- 23:59:00'
}

三、对代码进行一下说明

在这里插入图片描述

四、这是引入的格式化方式

在这里插入图片描述

export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
      time = parseInt(time)
    }
    if (typeof time === 'number' && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    return value.toString().padStart(2, '0')
  })
  return time_str
}

在这里插入图片描述

愿你走路不迷路,天天有钱花、伤心有人陪

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值