位置: IT常识 - 正文

elmentUI组建中el-date-picker实现限制时间范围精确到小时(elementui常用组件有哪些)

编辑:rootadmin
elmentUI组建中el-date-picker实现限制时间范围精确到小时 elmentUI组建中el-date-picker实现限制时间范围精确到小时需求要求时间选择器只能选择今天之前的日期.默认时间是前一天00点~23点后台返回的最小时间和最大时间时间精度限制到小时 开始想着用type="datetimerange"来实现,后来发现控制时间禁用无法实现,后改变思路使用两个type="datetime"拼装实现1.先获取一个只能选择到小时的时间范围选择器

推荐整理分享elmentUI组建中el-date-picker实现限制时间范围精确到小时(elementui常用组件有哪些),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:解读elementui的组件源码,解读elementui的组件源码,解读elementui的组件源码,elementui el-menu,解读elementui的组件源码,elementui有哪些组件,elementui rule,el组件,内容如对您有帮助,希望把文章链接给更多的朋友!

elmentUI组建中el-date-picker实现限制时间范围精确到小时(elementui常用组件有哪些)

css代码

<el-date-picker v-model="validity1" type="datetime" value-format="yyyy-MM-dd HH" format="yyyy/MM/dd HH" class="datepicker-content" :picker-options="datapickerOptions1" popper-class="datepickerPopperClass" @change="changeDatetime" placeholder="起始时间" :clearable="false" > </el-date-picker> ~ <el-date-picker v-model="validity2" type="datetime" value-format="yyyy-MM-dd HH" format="yyyy/MM/dd HH" class="datepicker-content" popper-class="datepickerPopperClass" :picker-options="datapickerOptions2" placeholder="结束时间" :disabled="!validity1" :clearable="false" > </el-date-picker>

如何实现精度到小时,使选择器只能选择到时间(如图)

通过修改css样式实现代码,隐藏分秒结构

.datepickerPopperClass{ .el-button--text{ display: none; //删除时间弹框中此刻按钮(根据需求决定是否保留) } .el-time-spinner__wrapper{ width:100%; } .el-scrollbar:nth-child(2){ display: none; }}

这样结构上就有一个只能选择到小时的时间范围选择器,这里结束时间在没有选择开始时间时是禁用的

2.通过picker-options属性来控制时间可选日期范围

其中disabledDate属性值来控制选择的日期范围,selectableRange属性值控制可选择的小时范围 vue中data中

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

上一篇:火灾烧毁大部分森林后,野花遍地的凯尔特河野营地 (© Debra Brash/plainpicture)(火灾烧毁物品如何取证)

下一篇:夕阳下的大白鲨过山车,美国新泽西州 (© John Van Decker/Alamy)

  • 公允价值变动损益影响营业利润吗
  • 法人转入公司的资金怎么做账
  • 车险 专票
  • 核定征收可以无发票做账吗
  • 纳税人出租不动产预缴税款
  • 个人取得的咨询费是什么
  • 少缴纳社保怎么要求支付赔偿金
  • 给职工发放的福利费,要从应付职工薪酬科目吗
  • 上月开票次月开红票销项税额有什么影响?
  • 增值税专用发票验票
  • 个人申请代开普需要资料
  • 正确解读《非居民金融账户涉税信息尽职调查管理办法》
  • 股权转让收到钱会计分录
  • 简易征收销项税额咋做账
  • 会计相关行业的工作职责和招聘要求
  • 资产评估溢价部分如何处理?
  • 奖励费收入是什么
  • 汽车的增值税可以退税吗
  • 开通电子税务局需要什么资料
  • 速动比率的合理范围
  • 一次性计提折旧的政策
  • win11测试版和正式版区别
  • php环境配置教程Apace
  • 领用自产库存商品
  • 长期债券投资减少是计入贷方吗?
  • 员工报销的费用
  • php floor()
  • 莱达尔湖, 英格兰坎布里亚郡湖区 (© Tranquillian1/iStock/Getty Images Plus)
  • 新西兰南岛西南部
  • php读取文件内容
  • 投喂小鸟
  • 抵扣认证发票统计确认后可以退回吗?
  • framework core
  • 有趣的html简单代码
  • 常用的css样式有哪些
  • ps怎么参考线快捷键
  • 固定资产转为投资性房地产公允价值
  • 深入了解jvm
  • 织梦手机端
  • 二手车的范围
  • sqlserver 15247
  • 一般纳税人开普票税率是3%还是13%
  • 固定资产一次性扣除政策
  • 收政府的慰问金合法吗
  • 新会计制度固定资产折旧账务处理
  • 公司转账转错账户
  • 融资租赁租金利息怎么算
  • 公司多出来的钱怎么办
  • 出口退税退的是哪些税
  • 低值易耗品入账
  • 累计减免所得税
  • 抵扣认证的发票怎么冲红
  • 暂领款是什么意思
  • 收到现金支票没有盖章
  • 简易征收可以开具3专票吗
  • 日记账的标准格式是
  • VMware虚拟机中卸载java命令
  • freebsd源代码开放?
  • 索尼vpcea200c笔记本
  • WINDOWS操作系统内置的GUEST
  • win8如何卸载360安全卫士?
  • xp系统1
  • win8系统如何查看电脑内存
  • win7电脑能登qq但打不开网页怎么办
  • 如何查看windows使用痕迹
  • linux who am i
  • win8.1删除所有内容并重新安装
  • 举例讲解水生花卉栽培管理
  • node性能优化
  • python2.7.11
  • jquery将文本框设置为只读
  • js == ===区别
  • js怎么定义类
  • jquery点击事件有什么方法显示
  • 国家税务总局是正部级还是副部级
  • 如何强化理论武装
  • 生产企业税点
  • 河南地税申报表怎么填
  • 买新房子需要交契税吗
  • 残疾人的房产可以买卖吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设