vue+elementui DateTimePicker 日期时间选择器使用
DatePicker使用中需要实现以下几点:有快捷选项(最近一周、一个月、三个月)开始时间为00:00:00,结束时间为23:59:59限制开始日期和结束日期的可选区域实现效果:实现:<el-date-pickerv-model="effectiveDate"type="datetimerange":default-time="['00:00:00', '23:59:59']":picker
·
DateTimePicker使用中需要实现以下几点:
- 有快捷选项(最近一周、一个月、三个月)
- 开始时间为00:00:00,结束时间为23:59:59
- 限制开始日期和结束日期的可选区域
实现效果:
实现:
<el-date-picker
v-model="effectiveDate"
type="datetimerange"
:default-time="['00:00:00', '23:59:59']"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const start = new Date();
const end = new Date();
end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const start = new Date();
const end = new Date();
end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick(picker) {
const start = new Date();
const end = new Date();
end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
}
}
],
disabledDate: time => {
return (
time.getTime() < Date.now() - 8.64e7 ||
time.getTime() >
new Date(this.tenantObj.endTime + " 23:59:59").getTime() - 0
);
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)