想要实现:禁用0点到9点 12点到14点等等的
多个
时间段。
但是官方的这个组件只支持传开始和结束时间(另一个组件
el
-time-
picker
支持,但是不符合我们的
UI
需求),对我来说不够用啊
因此我决定自己写组件 ,效果如下:
实现思路:
使用
el
-s
el
ect,手动制造源数据,封装为一个组件,传入禁用的时间段,传出
选
择的时间。
组件封装:
<template>
<
el
-s
el
ect class="s
el
ectTime" v-mod
el
="time" :placeholder="
this.getshiftList.data.forEach(v=>{
let start=new
Date
(v.
date
Value[0]).getTime();
let end=new
Date
(v.
date
Value[1]).getTime();
v.startTime=(v.
date
Value[0]+'').slice(16,25);
<
el
-
date
-
picker
v-mod
el
="value" :
picker
-options="
picker
Options"
type="
date
" size="mini" style="width: 130px"
placeholder="
选
择
日期
">
</
el
-da...
日期
时间
选择器
如何限制最多
选
择30天,其余时间置灰
<
el
-form ref="form" :mod
el
="form" lab
el
-position="right" lab
el
-width="180px" size="small" >
<
el
-row>
<
el
-col :span="8">
<
el
-form-item prop="task
Date
" lab
el
="时间">