位置: IT常识 - 正文
推荐整理分享elmentUI组建中el-date-picker实现限制时间范围精确到小时(elementui常用组件有哪些),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:解读elementui的组件源码,解读elementui的组件源码,解读elementui的组件源码,elementui el-menu,解读elementui的组件源码,elementui有哪些组件,elementui rule,el组件,内容如对您有帮助,希望把文章链接给更多的朋友!
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中
上一篇:火灾烧毁大部分森林后,野花遍地的凯尔特河野营地 (© Debra Brash/plainpicture)(火灾烧毁物品如何取证)
下一篇:夕阳下的大白鲨过山车,美国新泽西州 (© John Van Decker/Alamy)
友情链接: 武汉网站建设