我们开发的产品中常常会遇到要选日期,而且日期也是有限制的,比如起始日期不能小于当前日期、截止日期只能大于当前日期 X 天,我们一般是前后端进行控制,我这里简单描述下前端vue框架下怎么进行限制。我用的上饿了么的框架
1、起始日期不能小于当前日期
<el-form-item label="起始时间:" prop="startTime">
<el-col :span="11">
<el-date-picker
:picker-options="pickerOptions"
v-model="form.startTime"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
style="width: 100%;"/>
</el-col>
</el-form-item>
data() {
return {
// 时间控制器
pickerOptions: {
disabledDate: (time) => {
let nowData = new Date()
nowData = new Date(nowData.setDate(nowData.getDate() - 1))
return time < nowData
}
},
2、截止时间不能大于30天
<el-form-item label="截止时间:" prop="endTime">
<el-col :span="11">
<el-date-picker
:picker-options="pickerOptionsEnd"
v-model="form.endTime"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
style="width: 100%;"/>
</el-col>
</el-form-item>
data() {
return {
pickerOptionsEnd: {
disabledDate(time) {
const one = 30 * 24 * 3600 * 1000;
return time.getTime() > Date.now() + one || time.getTime() < Date.now();
}
}
}