JS实现日期控件的可选日期范围

编辑
文档创建者:迈达斯之手 (55902 )     浏览次数:4600次     编辑次数:8次     最近更新:ukae 于 2018-08-07     

目录:

1. 描述编辑

默认的日期控件的可选日期范围是一个连续的区间,而我们实际运用时可能需要的是离散的时间点,如下图只可选择本月的周四:

222

2. 思路编辑

通过js重写FR的日期控件,循环日期选项,判断日期是否是周四限制日期是否可选。

3. 操作步骤编辑

打开参数面板,拖入日期控件,给日期控件添加初始化后事件

222

this._createCalendar = function(){ var o = this.options; var self = this; if (this.options.need2BuildConfig === true && this.options.data) { this.options.data.resetStatus(this.createDependencePara4Data()); var data = this.options.data.getData(); if (data[0].data) { if (data[0].data.startDate) { var sd = new Date(data[0].data.startDate); if (!FR.isInvalidDate(sd)) { o.startDate = FR.date2Str(sd, 'yyyy-MM-dd'); this.std = this._createStartDate(o.startDate, o.format, this.viewMode); } } if (data[0].data.endDate) { var ed = new Date(data[0].data.endDate); if (!FR.isInvalidDate(ed)) { o.endDate = FR.date2Str(ed, 'yyyy-MM-dd'); this.edd = this._createEndDate(o.endDate, o.format, this.viewMode); } } } this.options.rebuildConfig = false; } this.datepicker = new FR.DatePicker({ renderEl: this.$view, viewMode: this.viewMode, date: FR.str2Date(this.editComp.val(), o.format), dateFormat: o.format, startDate: this.std, endDate: this.edd, onDateUpdate:function(){ if ($(':focus').length === 0) { self.editComp.focus(); } self.editComp.val(FR.date2Str(this.getValue(), o.format)); self.isValidateInput(); self.fireEvent(FR.Events.AFTEREDIT); } }); this.datepicker._loadDateData = function (table, date) { if (!date) { return; } var year = date.getFullYear(), month = date.getMonth(), day = date.getDate(); var today = new Date(), TY = today.getFullYear(), TM = today.getMonth(), TD = today.getDate(); this.cache.showYear = year; this.cache.showMonth = month; var std = this.options.startDate, edd = this.options.endDate; table.$title.text(Date._MN[month] + ", " + year); var nextDay = new Date(date); nextDay.setDate(nextDay.getMonthDays() + 1); if ((edd && nextDay > edd) || nextDay.getFullYear() > this.CONSTS.MAXYEAR) { table.$nextm.addClass('disabled').removeClass('hover').data('disabled', true); } else { table.$nextm.removeClass('disabled').data('disabled', false); } var prevDay = new Date(date); prevDay.setDate(0); if ((std && prevDay < std) || prevDay.getFullYear() < this.CONSTS.MINYEAR) { table.$prevm.addClass('disabled').removeClass('hover').data('disabled', true); } else { table.$prevm.removeClass('disabled').data('disabled', false); } date.setDate(1); var day1 = (date.getDay() - this.CONSTS.FIRSTDAY) % 7; date.setDate(0 - day1); date.setDate(date.getDate() + 1); var $frow = table.find('tbody').children().eq(0); for (var i = 0; i < 6; i++) { if (!$frow.length) { break; } var $cell = $frow.children().eq(0); $cell.addClass('week wn').text(date.getWeekNumber()); var iday; for (var j = 0; j < 7; ++j, date.setDate(iday + 1)) { $cell = $cell.next(); $cell.removeClass().data('nav', this.CONSTS.NAV['day']); if (!$cell.length) { break; } iday = date.getDate(); $cell.text(iday); var current_month = (date.getMonth() == month); if (!current_month || j !=4 ) { $cell.addClass('oday').data('disabled',true); continue; } var disabled = false; if ((std != null && std > date) || (edd != null && edd < date)) { $cell.addClass('day disabled'); disabled = true; } else { $cell.addClass('day'); } $cell.data('disabled', disabled); if (!disabled) { if (current_month && iday == day) { this.cache.selectedDate && this.cache.selectedDate.removeClass('selected'); $cell.addClass('selected'); this.cache.selectedDate = $cell; this.cache.showDay = iday; } if (date.getFullYear() == TY && date.getMonth() == TM && iday == TD) { $cell.addClass('today'); } var wday = date.getDay(); if ([0, 6].indexOf(wday) != -1) { $cell.addClass("weekend"); } } } $frow = $frow.next(); } } if (FR.Browser.isIE8() && this.$view.css('visibility') == 'hidden') { this.$view.css("visibility", "visible"); } else { this.$view.show(); } $(document).bind('mousedown', this, this.collapseIf); this.modifyPosition(); var tr = $('tbody>tr',this.datepicker.$datetable); for( var i=0; i<tr.length; i++ ){ var $days = $('td[class!="week wn"]',tr[i]); for( var j=0; j<$days.length; j++ ){ var $day = $($days[j]); if( 4 != j && !$day.hasClass('oday')){ $day.data("disabled",true); $day.attr('class','oday'); } } } }

重点关注下面这段代码:

var tr = $('tbody>tr',this.datepicker.$datetable); for( var i=0; i<tr.length; i++ ){ var $days = $('td[class!="week wn"]',tr[i]); for( var j=0; j<$days.length; j++ ){ var $day = $($days[j]); if( 4 != j && !$day.hasClass('oday')){ $day.data("disabled",true); $day.attr('class','oday'); } } }

这段代码是只保留当月的每周周四可选,其他都不可选。

设置某一天不可选的方法为,获取到该天的td然后执行下面的代码:

$day.data("disabled",true); $day.attr('class','oday');

4. 预览效果编辑

4.1 PC端预览效果

222

注:不支持移动端。

5. 已完成模板编辑

模板效果在线查看请点击:JS实现日期控件的可选日期范围.cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\03-JS实现日期控件的可选日期范围.cpt

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]