在公司开发的过程中遇到的问题,我们采用了iview的Vue框架。
现有一个需求:用户在初始时页面后,DatePicker 的可选时间范围不作限制,用户可选择任意一天。当用户选择了某一天(planTime)后,并进行内容查询后,DatePicker的时间范围限制为 planTime 所在的这个月。
一开始我的解决方法:设置两个 DatePicker,v-model都为planTime。当用户选择了某一天并进行查询后,通过判断 planTime 不为空显示”一开始就被限制了时间范围“的DatePicker控件。但是,因为我一开始不知道用户会选择哪一天,所以,此时我只能限制用户选择当前这个月。
贴代码:
<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();
/* 生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
curDate.setMonth(curMonth + 1);
/* 由curMouth 加了1,所以这个是 curDate 是下个月的,setDate(0)之后就是这个月的最后一天 */
// setDate()方法用來設定日期物件中本地時間的日,也就是每個月中的幾號,傳入參數是一個1~31的整數。
// 若是傳入的值超出當月份的正常範圍,setDate()方法也會依據超出的數值進行計算,
// 譬如setDate(0)會讓日期變成前一個月的最後一天,setDate(-1)會讓日期變成前一個月的倒數第二天。
// 若當月有31天,那setDate(32)會讓日期變成下個月的第一天。
curDate.setDate(0);
/* 返回当月的天数 */
return curDate.getDate();
}
你可以参考下http://www.fidding.me/article/45 和 我这个问题里的代码:https://segmentfault.com/q/10...
应该是你说的用户点击日期时设置另一个日期DatePicke的不可选日期。
我遇到的问题和你的不一样,可以互相帮助下