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

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组件,内容如对您有帮助，希望把文章链接给更多的朋友！

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中