帆软日期控件选择指定的日期

时间：2019-08-19 11:12:17 阅读：194 评论：0 收藏：0 [点我收藏+]

　　使用帆软日期控件时，发现一个之前没有做过的需求：在用户选择日期的时候进行控制，使用户只能选择指定的日期。具体的需求是：在用户选择日期的时候，让用户只能选择每月15日以及25日。在帆软的文档中有类似的js代码，地址：https://help.finereport.com/。

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]A.data) {
            if (data[0]A.data.startDate) {
                var sd = new Date(data[0]A.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]A.data.endDate) {
                var ed = new Date(data[0]A.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]A + ", " + 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‘]A);
                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]A.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"]A‘, tr[i]A);
        for (var j = 0; j < $days.length; j++) {
            var $day = $($days[j]A);
            if (4 != j && !$day.hasClass(‘oday‘)) {
                $day.data("disabled", true);
                $day.attr(‘class‘, ‘oday‘);
            }
        }
    }
}

这段代码控制了帆软日期控件只能选择周四的日期，和我现在的需求并不完全一致，所以需要改动部分代码，这段js有些复杂，在页面上运行并打断点测试后分析了一下。

debugger;
//this._createCalendar 在日期控件初始化时开始调用这个方法。
this._createCalendar = function() {
    var o = this.options;
    var self = this;
    //重新创建日期控件对象
    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);
        }
    });
    
    debugger;
    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"]A‘, tr[i]A);
        for (var j = 0; j < $days.length; j++) {
            var $day = $($days[j]A);
　　　　　　　//在获取到单个日期对象后，取到该对象对应的值。
            var text = $day[0]A.innerText; 
            if (text != ‘15‘ && text != ‘25‘) {
                $day.data("disabled", true);
                $day.attr(‘class‘, ‘oday‘);
            }
        }
    }
    //选择非当前月，这一段的原理与选择当前月的是一样的。
    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]A + ", " + 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‘]A);
                if (!$cell.length) {
                    break;
                }
                iday = date.getDate();
                $cell.text(iday);
                var current_month = (date.getMonth() == month);
                var text = $cell[0]A.innerText; 
                if (!current_month || (text != ‘15‘ && text != ‘25‘)) {
                    $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]A.indexOf(wday) != -1) {
                        $cell.addClass("weekend");
                    }
                }
            }
            $frow = $frow.next();
        }
    }
}

到这里大体的功能都能够搞懂，并实现自身的需求，有一些细节的地方还是不太明白，这需要清楚日期控件是怎么生成，在这里记录一下，如果以后碰到类似的问题就以这次的思路去解决。

帆软日期控件选择指定的日期

原文：https://www.cnblogs.com/sjjava/p/11375327.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)