位置: 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)

  • 税务定税按什么标准
  • 一般风险准备是留存收益吗
  • 电子发票错误怎么重开
  • 2020年个税全年累计扣除如何计算
  • 酒水进项税税率
  • 残疾人就业保障金
  • 应税职工福利费在应纳税所得额里面吗
  • 企业间借款利息怎么算
  • 核定和查账区别
  • 有限责任公司减资的法律规定
  • 母子公司之间的管理费可以税前扣除吗
  • 股东借款利息代扣代缴增值税是怎样算的?
  • 票据追索权向谁追索
  • 营改增后房地产企业如何开票
  • etc预付卡发票能不能报销
  • 关于财产保险公司的论文
  • 外商投资的企业是外资企业吗
  • 母子公司合并报表什么时候做
  • 汽车运输增值税专用发票多少税点
  • 坏账收不回怎么做账
  • 单位缴纳的社保算不算工资
  • 股东变更交印花税会计分录
  • 月末结转损益类科目为零对吗
  • 物业公司监控一般保留多久
  • 苹果mac系统怎么截屏快捷键
  • win8怎么提高性能
  • 建筑劳务公司计提人工劳务费需要工资表吗?
  • 土地增值税清算的条件
  • PHP:oci_field_size()的用法_Oracle函数
  • 银行本票实际金额小于票面金额
  • 年终奖并入综合所得
  • 第一季度季初资产总额和第一季度季末同一个数吗
  • 汽车检测没过收钱不
  • php运行linux命令
  • 差额征税的几种情况
  • 个税申报表收入额怎么填
  • 数据结构—python语言描述
  • React props全面详细解析
  • mysql的where语句优化
  • 专用发票超过360天未认证
  • 公司归还股东借款是否需要股东会决议
  • 超详细的mac重装系统教程
  • 应付职工薪酬的核算内容
  • 融资租赁业务如何开展
  • 售房中心给客人怎么说
  • 电子承兑汇票的风险有哪些
  • 小规模其他业务收入交多少税率
  • 工程上第三方代表啥意思
  • 如何判断企业处于什么阶段
  • 敬老院的会计科目
  • mysql的概念及作用
  • mysql的增删改查命令
  • sql server数据
  • sql server索引怎么用
  • Linux下mysql的root密码修改方法
  • win8键盘f1到f12取消按fn
  • win8升级win10系统会卡吗
  • centos6.5安装步骤
  • windows环境是什么意思
  • OS X10.10.5 Yosemite beta2发布 os x10.10.5yosemite beta2官网下载地址
  • WIN7系统安装
  • windows更新88
  • win10 2020h1
  • ps显示操作步骤
  • NDSTray.exe - NDSTray是什么进程 有什么用
  • 快捷方式栏在哪
  • 如何解决windows激活问题
  • win10 1511版本升级到1803
  • Unity3D游戏开发(第2版)
  • jquery中绑定事件
  • Node.js中的construct构造函数
  • JavaScript中数组长度的属性
  • jquery datatable服务端分页
  • python的设置
  • 临时占地耕地占用税纳税义务发生时间
  • 广东省电子税务局官网登录入口
  • 黄金手镯可以卖出去吗
  • 杭州市税务局副局长
  • 航天信息的金税盘开票要怎么调格式
  • 诚信励志语录经典短句
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设