在公司开发的过程中遇到的问题，我们采用了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();}
添加回答
举报
0/150
提交
取消