![13149f05c59f5059ec7485f5d037a4e9.png](https://i-blog.csdnimg.cn/blog_migrate/0b6daa57849e5a40bdc259c9153cb523.png)
1. 在element UI中复制一个时间日期选择器组件
默认 v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
2. 在官方文档中找到发现可以自动以某日的样式的参数,找到picker-options
![2905626864b938a6926cbf7a746f761c.png](https://i-blog.csdnimg.cn/blog_migrate/8f46424aee8aa2f1da19d0364d701a23.png)
3. 改造 picker-options
- (小坑1) 为了让
function cellClassName(Date)
能正常使用this, picker-options需要写在computed中 - (小坑2) 注意自己的日期格式
YYYY-MM-DD
, 是否需要补0 - (小坑3) 使用
@focus
获取数据在范围选择器中会触发两次, 待优化
默认 v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="customPickerOptions"
popper-
@focus="initCustomDate"
>
4. 自定义样式
- (小坑4) 不能使用scoped局部作用域,所以我写到了app.vue中作为全局样式,也方便其他地方复用
// APP.vue
5. 继续优化样式
![e966ad97ea3576f3601e48bd45109864.png](https://i-blog.csdnimg.cn/blog_migrate/53397305cd08d82f7a8df1fc778c6050.png)
完成前4步,会出现上图的情况,选中日期时挡住了部分文字,再翻翻文档有什么可用参数,找到popper-class
![0418f90e0e383fbff1a72a42cb931250.png](https://i-blog.csdnimg.cn/blog_migrate/860386452009c6195eb4283bb79ac9e3.png)
找到元素所在的位置,进行样式覆盖
![7f80780c2e700140dab85ec31176fcdb.png](https://i-blog.csdnimg.cn/blog_migrate/d1e0b039a4828363ed255751283f2b5e.png)
// APP.vue
6. 待优化 获取数据的触发时机
- 使用
@focus
获取数据在 范围选择器中会触发两次 - 有更好的方法或者发现写错以及可以优化的地方欢迎交流