for the problems encountered in the development process of the company, we adopted iview"s Vue framework.
there is a requirement: after the initial page, the optional time range of DatePicker is not limited, and the user can choose any day. When the user selects a (planTime) for a certain day and makes a content query, the time range of the DatePicker is limited to the month in which the planTime is located.
my solution at first: set both DatePicker,v-model to planTime. When the user selects a certain day and makes a query, it determines that the planTime is not empty to display the DatePicker control that "the time range was limited in the first place". However, because I don"t know which day the user will choose at first, I can only restrict the user to choose the current month at this time.
paste code:
<Form-item label="">
<div v-if="planTime == """>
<Date-picker type="date" placeholder="" v-model="planTime" :options="optionsOfTime" key="one"
format="yyyy-MM-dd"></Date-picker>
</div>
<div v-else>
<Date-picker type="date" placeholder="" v-model="planTime" key="two"
format="yyyy-MM-dd"></Date-picker>
</div>
</Form-item>data() {
return {
optionsOfTime: { //
disabledDate(date) {
const myDate = new Date(),
day = myDate.getDate()
//
return date && Date.now() + (getNumOfMouthDays() - day) * 86400000 < date.valueOf() || date.valueOf() < Date.now() - day * 86400000;
}
},
planTime: ""
}
}/**
*
* @returns {number}
*/
export const getNumOfMouthDays = () => {
var curDate = new Date();
/* */
var curMonth = curDate.getMonth();
/* : curMonth1, 1 */
curDate.setMonth(curMonth + 1);
/* curMouth 1 curDate setDate(0) */
// setDate()1~31
// setDate()
// setDate(0)setDate(-1)
// 31setDate(32)
curDate.setDate(0);
/* */
return curDate.getDate();
} 