vue中日期如何加天数_如何在vue + element日期时间选择器中增加已标记功能

image.png

1. 在element UI中复制一个时间日期选择器组件

默认 v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">





2. 在官方文档中找到发现可以自动以某日的样式的参数,找到picker-options

image.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. 继续优化样式

image

完成前4步,会出现上图的情况,选中日期时挡住了部分文字,再翻翻文档有什么可用参数,找到popper-class

image.png

找到元素所在的位置,进行样式覆盖

image.png

// APP.vue

6. 待优化 获取数据的触发时机

• 使用 @focus 获取数据在 范围选择器中会触发两次
• 有更好的方法或者发现写错以及可以优化的地方欢迎交流