1. Code
<el-date-picker
v-model="startTime"
type="date"
:picker-options="pickerOptions"
placeholder="Starts On"
:clearable="false"
:format="`${date} ~ yyyy/MM/dd`"
:value-format="`yyyy/MM/dd`"
>
</el-date-picker>
pickerOptions: any = {
disabledDate(time: any) {
return time.getTime() < Date.now() - 3600 * 1000 * 24;
},
shortcuts: [
{
text: "In 7 Days",
onClick(picker: any) {
const end = new Date();
end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
picker.$emit("pick", end);
}
}]
}
2. 默认日期修改
官方的 default-value没用,得用 v-model给个初始值
v-model="startTime"
3. 默认日期样式修改
- 问题:默认日期样式如下,本来想根据选择的时区不同显示的日期不同,但是没有找到方法【大神有方法请告诉我tks】
- 解决办法:修改样式= =!,element中如 【时间选择器】【pop】等dom不在组件中,所以我在index.html中修改,或者去掉组件CSS中的scope似乎也行,但我没试
修改后的样式
.el-date-table td.today span {
font-weight: normal;
color: #606266;
}
4. 值的格式修改
不能使用一个改变的变量(如下一条)
:value-format="`yyyy/MM/dd`"
5. 值的显示格式修改
可以使用一个改变的变量
:format="`${date} ~ yyyy/MM/dd`"
6. 日期禁用/快速选择
日期禁用/快速选择需要使用 pickerOptions中的 disableddate和shortcuts