iview日期选择器更改显示日期书_如何动态 设置 iview DatePicker 控件的 禁用日期（option）...
在公司开发的过程中遇到的问题，我们采用了iview的Vue框架。
现有一个需求：用户在初始时页面后，DatePicker 的可选时间范围不作限制，用户可选择任意一天。当用户选择了某一天(planTime)后，并进行内容查询后，DatePicker的时间范围限制为 planTime 所在的这个月。
一开始我的解决方法：设置两个 DatePicker，v-model都为planTime。当用户选择了某一天并进行查询后，通过判断 planTime 不为空显示”一开始就被限制了时间范围“的DatePicker控件。但是，因为我一开始不知道用户会选择哪一天，所以，此时我只能限制用户选择当前这个月。
贴代码：
format="yyyy-MM-dd">
format="yyyy-MM-dd">
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();
}
iview日期选择器更改显示日期书_如何动态 设置 iview DatePicker 控件的 禁用日期（option）...相关推荐
- 解决viewUI中 DatePicker控件获取的日期总是少一天的问题
解决viewUI中 DatePicker控件获取的日期总是少一天的问题 <DatePickertype="date"placeholder="请选择日期" ...
- 如何使用Dojo的DatePicker控件制作联动日期选择器
在开发系统的调查功能时,需要设计一个可以联动的开始日期/结束日期选择器用来设定用户的调查的起始/结束日期.对于这个联动的日期选择器,我们的设计要求是这样的: 在新增调查时,该调查的开始日期默认为今天, ...
- easyui 动态设置单元格控件_比Excel还简单，实现动态报表原来只需要十分钟！
做过报表的人,尤其是经常有报表需求的人,想必都会有这样一个困惑: 为什么同样是做报表,其他人的报表就能够得到领导的肯定,而自己的报表就会被老板丢掉一边? 这个问题其实很好回答,你想一想,如果你是老板, ...
- easyui 动态设置单元格控件_动态显示最大最小值的折线图
小伙伴们好啊,今天和大家分享一个图表有关的知识. 折线图想必大家已经司空见惯,今天就要在简单的折线上,做出不简单的效果. 用动态折线图,展示一周销售的变化,并且自动突出最大最小值. 1.准备数据源 以 ...
- easyui 动态设置单元格控件_插入控件-gt;引用变量-gt;实现动态图表纵横筛选
- element 让日期选择器一直显示选择面板
element 日期选择一直显示 问题描述 解决方案 问题描述 想要达到如下效果,使得日期选择器的日期选择面板一直展示着,无论是点击其他地方还是点击了日期,都显示着. 解决方案 通过翻阅官方文档 El ...
- 【Android从零单排系列十一】《Android视图控件——日历、日期、时间选择控件》
目录 一.日历.日期.时间组件基本介绍 二.几种常见的控件类型 1.CalendarView –日历控件 2. DatePicker –日期选择控件 3.TimePicker –时间选择控件 4.Ch ...
- delphi中DateTimePicker控件同时输入日期和时间
将DateTimePicker的Format属性中加入日期格式设成 'yyyy-MM-dd HH:mm',注意大小写 , 将kind设置为dtkTime即可,可以在每次Form onShow时将Dat ...
- android日期联动,Android时间(TimePicker)日期(DatePicker)控件联动
Android原生控件中时间日期是分开的,但是有时我们的实际工作中可能是需要两个联动选择的,这时就需要我们自己将两个控件组合起来封装了一个工具类. image.png image.png 一. 创建工 ...
最新文章
- 修改mysql参数_mysql动态修改参数
- 新产品扑朔迷离，Magic Leap又跑去收购3D扫描公司
- 多层科目任意组合汇总报表的性能优化 (上)
- yolov4论文_YOLOv4论文详细解读
- linux应用开发：头文件和库文件的路径及使用
- STL vector 用法介绍
- 04-git 推送出现 fatal: The remote end hung up unexpectedly 解决方案
- 2怎么升级固件_西门子PLC固件升级，S71200 固件升级方法
- 决战EXCEL2010
- pyqt5多进程 python_PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
- 8款功能强大的最新HTML5特效实例
- Redis恢复被删掉了的key值
- 最专业逻辑图和最专业项目文档制作实战讲解
- m3u8 java_m3u8Download java 下载 m3u8 视频，解密并合并 ts java download m3u8 vide @codeKK Android开源站...
- Entry name 'META-INF/MANIFEST.MF' collided
- 创业日志：一个和尚挑水喝，两个和尚抬水喝，三个和尚没水喝？
- Redis -- 缓存穿透和雪崩
- mysql list dbs 代替_mysql_list_dbs函数的用法实例汇总
- 自组织竞争网络(SOM)
- 技术牛人在阿里内网的公开信：“王坚，你为什么要放弃”