位置: IT常识 - 正文

ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒)

编辑:rootadmin
ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒) 项目场景

推荐整理分享ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

ElementPlus DateTimePicker日期时间选择器 当我们使用日期时间选择器时,可能会有需求只能选择今日之前或者今日之后,又或者一周内,一个月内的时间,而其他的时间应该禁止被用户选择。

解决

直接看文档: 我没通过设置disabled-date属性来自定义禁用的时间。

今天之前/之后ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒)

只能选择今天之后的时间。

<template> <div> <el-date-picker v-model="time" type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" :disabledDate="disabledDateFn"></el-date-picker> </div></template><script setup lang="ts">import { ref } from 'vue';const time = ref('')const disabledDateFn = (time: any) => { return time.getTime() < Date.now();}</script><style scoped></style>

同理,只可选择今天之前的时间直接取反即可。

一周之内

今天之前的,“大于”今天加7天的,禁用。(7 * 24 * 3600 * 1000为7天所对应的毫秒)

const disabledDateFn = (time: any) => { return time.getTime() < Date.now() || time.getTime() > Date.now() + 7 * 24 * 3600 * 1000;}

其他时间同理。

禁用时分秒

在上面的例子中,其实存在一个问题,如下图: 如图,虽然11号不能选择,但是点击事件选择框,则可以选择一整天的时间。 显然,这样用户体验十分不好,最理想的应该是用户可以选择11号,点开时间选择框只能选择当前之后的时分秒。

在网上找了很多方案,发现全是旧版elementUI的,好像elementPLUS把selectableRange已经去掉了,而文档中也没有明确指出限制时分秒的属性,最后的解决方案:

<template> <div> <el-date-picker v-model="time" type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" :disabledDate="disabledDateFn" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" :default-time="new Date()"> </el-date-picker> </div></template><script setup lang="ts">import { ref } from "vue";const time = ref("");const disabledDateFn = (time: any) => { //比当前时间小的时间禁用(返回false则禁用) return time.getTime() < Date.now() - 24 * 3600 * 1000;};const disabledHours = () => { const a = []; for (let i = 0; i < 24; i++) { // 限制之前 < 之后 > ,下面同理 if (new Date().getHours() <= i) continue; a.push(i); } return a;};const disabledMinutes = () => { const a = []; for (let i = 0; i < 60; i++) { // 限制之前 < 之后 > ,下面同理 if (new Date().getMinutes() <= i) continue; a.push(i); } return a;};const disabledSeconds = () => { const a = []; for (let i = 0; i < 60; i++) { // 限制之前 < 之后 > ,下面同理 if (new Date().getSeconds() <= i) continue; a.push(i); } return a;};</script><style scoped></style>

这里之所以设置default-time为当前时间,是我发现当点击今天时,默认时间是00:00:00,按理说应该无法选中的…… 最后的效果:

本文链接地址:https://www.jiuchutong.com/zhishi/287285.html 转载请保留说明!

上一篇:Vue 批量上传,使用 el-upload 实现批量上传文件只调用一个请求,只需要一个上传按钮(vue批量上传图片至oss)

下一篇:VUE前端实现“模糊搜索“(纯前端)(vue前端页面设计)

  • 白酒的品牌使用费含增值税吗
  • 小规模开的专票能抵扣进项税吗
  • 金税盘开具发票 在增值税申报表哪填写
  • 出口货物进项税怎样处理
  • 分公司是独立核算还是非独立核算
  • 客观原因导致的没见过世面
  • 公司冲账发票做不够该如何处理合适?
  • 装修项目展示厅费用支出列什么科目?
  • 关于预计负债应付退货款明细科目
  • 税控技术服务费每年都可以抵扣吗
  • 本月只有红字发票该怎么申报小规模
  • 外包服务费税率是多少
  • 外国人的纳税人识别号是护照号吗
  • 库存现金可以用于支付哪些钱
  • 高速公路通行费抵扣最新规定
  • 十分钟看懂财务报表
  • 增值税减免税明细表
  • 非金融企业向金融企业借款的利息
  • 补提的增值税应该记在哪里
  • 资本公积是什么会计要素
  • 债权债务重组公司
  • 一般纳税人增值税税率
  • linux 部署
  • win7为什么现在不能用了
  • ios9.3.5如何越狱
  • 购货款先到支付后付款
  • ui.exe啥意思
  • vue获取当前路由地址
  • php simple html dom parser
  • sql数据库语句基本语法
  • 公司上市的好处
  • webpack与gulp面试题
  • stm32f103教程
  • web系统的安全现状
  • ps中分辨率
  • 建筑工程企业所得税预缴
  • 财政补助结转会计处理
  • phpcms程序
  • 设备购买与租赁的分析中,购买优于租赁的条件是
  • 帝国cms灵动标签调用标题图片
  • 织梦图片要放哪里
  • 有限公司也可以向股东核发股票
  • 折现指标和非折现指标
  • 企业所得税汇算清缴扣除标准2023
  • sql数据库降低版本
  • 4s店开的维修发票怎么开
  • centos 安装方法
  • 投资性房地产租金
  • 货物抵货款的账务处理
  • 长期借款计提的利息可能借记
  • 怎么做好流水账
  • 手撕定额发票可以抵扣吗
  • 对公户收到一笔款怎么做账处理了?
  • 其他应收款待抵扣借方是什么意思啊
  • 预付账款无法取得发票如何处理
  • 原材料会计科目
  • 劳务公司的工资表怎么做账
  • 会计总监的薪资是多少
  • 如何为报表指定数据源?
  • 会计基础知识必背100题
  • mysql优化总结
  • sql %和_
  • 录制界面
  • Win7 64位摄像头驱动显示黄色感叹号无法使用的解决方法
  • messengerd
  • win7win10双硬盘双系统
  • win10的命令行在哪里
  • 怎么关闭win10系统
  • node.js批量添加数据
  • 我是如何从0开始做到年入1000+万的
  • dos命令检测硬盘坏道
  • React Native react-navigation 导航使用详解
  • 如何创建node项目
  • linux文件inode详解
  • android重写方法
  • nodejs cgi
  • 解读高考作文
  • python字符串的编码规则
  • 税务登记表格怎么填写
  • 车辆免征信息怎么查
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设