位置: 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前端页面设计)

  • 小企业汇算清缴要审计报告吗
  • 价内税有哪些税种
  • 租的房子装修费如何入账
  • 丢失增值税发票已报税证明单怎么开
  • 人力资源服务的概念
  • 企业所得税能不能删除重新报
  • 筹建期间购买的机械配件
  • 成本类科目有哪些口诀
  • 怎么算应纳企业所得税
  • 企业所得税税收优惠政策
  • 筹办期的工资费用是什么
  • 发票隔月报送可以么?
  • 红字发票科目入进项税额还是进项税额转出
  • 企业所得税季报资产总额怎么填
  • 预缴增值税销售额
  • 计提摊销房租会计分录
  • 未收到增值税专用发票
  • 客户退回发票会退回吗
  • 营改增后购置设备进项税抵扣怎么做?
  • 个人营业税是什么意思
  • 高管怎么样
  • 专票红冲如何做账
  • 小微企业计算公式
  • 小区物业宿舍
  • 收到未知款项如何做账
  • 政府补贴收入账户是什么
  • 员工宿舍可以扣除住房租金支出吗
  • 母公司向全资子公司划转土地
  • 投资性房地产公允价值模式账务处理
  • 材料采购费用的是
  • 如果网页上有错字怎么办
  • 会计凭证丢失补违规么
  • 以前年度的费用可以入在当年吗?
  • 指定的网络名不再可用 共享打印机00x0000040
  • 结算审计流程图
  • adblock规则编写
  • 退回已修改是什么意思
  • 无形资产相关税费
  • 地方各项基金费(工会经费)可以不申报吗
  • print函数php
  • 应交税金及附加包括哪些
  • vgdisplay命令无效
  • 税控盘开具增值税专用发票步骤
  • 公允价值计量转权益法例题
  • 非流动资产基金对应的新科目
  • js正数转负数
  • 业务招待费列支不规范
  • 基本户开立账户清单
  • 现金流量表为负数的几种原因
  • 有限合伙企业的税收筹划
  • 一年发一次工资好不好
  • 安全生产责任险是强制险吗
  • 进项税转出税额
  • 其他综合收益相反科目
  • 业务招待费税务扣除标准
  • 非税收入票据如何开具
  • 可转换债券是什么资本
  • 如何做好企业安全生产工作
  • 国有企业公司制改造 发行企业债券
  • 房地产企业会计核算和税务处理大全
  • sql必会知识
  • fedora下的bridge和nat设置方法
  • android linux deploy
  • win7系统安装谷歌浏览器
  • win7如何设置屏幕不黑屏
  • linux充当虚拟内存的是哪个分区
  • 电脑win7不能用怎么办
  • win7玩游戏全屏
  • jquery操作html代码
  • font:inherit
  • python让用户选择
  • 谷歌编程之夏2021
  • Unity3D Vuforia Android 拨打电话
  • 如何用jquery
  • Javascript中Array.prototype.map()详解
  • 拟录用人员公示后还会递补吗
  • 廊坊银行辟谣了吗
  • 个体户一直没有年报
  • 成都市武侯区税务局官网
  • 普通发票冲红怎么报税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设