element-ui基础
# 引入
# 日期组件
# 1、设置哪些时间不可选择
<el-form-item label="预约时间">
<el-date-picker type="date" placeholder="选择日期"
:picker-options="pickerOptionsAfterNow"
v-model="doctorScheduleOrder.appointmentDate"></el-date-picker>
</el-form-item>
1
2
3
4
5
2
3
4
5
data: function () {
return {
pickerOptionsAfterNow: {
disabledDate(time) {
// time为下拉日历表里面的所有时间
let curDate = (new Date()).getTime(); // 当前时间
let month = 30 * 24 * 3600 * 1000; // 30天，一个月时间
let oneMonths = curDate + month;
return (time.getTime() < Date.now() - 8.64e7) || time.getTime() > oneMonths;
}
},
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
其实就是定义disabledDate(time)方法， time为下拉日历表里面的所有时间
参考：
date-picker组件 | Element (opens new window) 、【ElementUI】日期选择器时间选择范围限制 - ipCoder - 博客园 (cnblogs.com) (opens new window)
# 2、设置默认时间
mounted() {
this.init()
},
methods: {
init() { // 初始化
this.doctorScheduleOrder.appointmentDate = this.getNowTime();
},
getNowTime() {
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth(); //得到月份
var date = now.getDate(); //得到日期
month = month + 1;
month = month.toString().padStart(2, "0");
date = date.toString().padStart(2, "0");
return `${year}-${month}-${date}`;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19