Question

我想使用dijit.calendar小部件，但能够从日期数组中设置禁用日期。所有示例都指出了如何禁用周末，但我也需要禁用特殊日期。

有人能指出我在isDisabledDate中使用自定义函数的正确方向，而不仅仅是dojo.date.locale中的什么？

我尝试编写一个函数，并将它放在isDisabledDate属性中，但我得到的只是错误。

Answer 1

我在这里做了一个很大的假设，你是通过XHR请求为每个月填充你的数组。此XHR请求以Y-m-d格式返回一个字符串数组（即['2011-11-29'，'2011-11-30']）。另一个小的假设是XHR请求返回应该启用的日期数组，但是可以通过交换disable = true;和disable = false;行来反转这一点

我不知道在没有光顾的情况下会有多少细节，所以如果有什么不清楚的话，我会在事后澄清。

dojo.provide("custom.Calendar");
dojo.declare("custom.Calendar", dijit.Calendar, {
    _xhr: null,
    // Month/Year navigation buttons clicked
    _adjustDisplay: function(){
        // Ensure all dates are initially enabled (prevents seepage)
        this.isDisabledDate = function(date) {
            return false;
        };
        this.inherited(arguments);
        this._disableAndPopulate();
    },
    constructor: function(){
        this.inherited(arguments);
        this._disableAndPopulate();
    },
    // Month drop down box
    _onMonthSelect: function(){
        // Ensure all dates are initially enabled (prevents seepage)
        this.isDisabledDate = function(date) {
            return false;
        };
        this.inherited(arguments);
        this._disableAndPopulate();
    },
    // Set disabled dates and re-render calendar
    _disableAndPopulate: function(){
        var currDate = this.currentFocus;

        // Get Lower bound date
        var startDate = new Date();
        startDate.setFullYear(currDate.getFullYear(), currDate.getMonth(), -5);
        // Create ymd dates manually (10x faster than dojo.date.locale.format)
        var startMonth = (startDate.getMonth()<9 ? '0' + (startDate.getMonth()+1) : startDate.getMonth()+1);
        var startDay = (startDate.getDate()<10 ? '0' + startDate.getDate() : startDate.getDate());
        var ymdStartDate = startDate.getFullYear() + '-' + startMonth + '-' + startDay;

        // Get Upper bound date
        var endDate = new Date();
        endDate.setFullYear(currDate.getFullYear(), currDate.getMonth() + 1, 14);
        // Create ymd dates manually (10x faster than dojo.date.locale.format)
        var endMonth = (endDate.getMonth()<9 ? '0' + (endDate.getMonth()+1) : endDate.getMonth()+1);
        var endDay = (endDate.getDate()<10 ? '0' + endDate.getDate() : endDate.getDate());
        var ymdEndDate = endDate.getFullYear() + '-' + endMonth + '-' + endDay;

        var calendar = this;
        // Get IssueDates
        var issueDates;
        // If an existing xhr request is still running, cancel it before starting a new one
        if (this._xhr) {
            this._xhr.cancel();
        }
        this._xhr = dojo.xhrGet({
            url: "http://.....", // url of server-side script
            content: {
                startDate: ymdStartDate, // Earliest possible date displayed on current month
                endDate: ymdEndDate, // Last possible date displayed on current month
                filters: {} // Any additional criteria which your server-side script uses to determine which dates to return
            },
            failOk: true, // Prevent error being logged to console when previous XHR calls are cancelled
            load: function(data){
                issueDates = dojo.fromJson(data);
                if (issueDates === undefined) {
                    // Error with xhr
                } else {
                    calendar.isDisabledDate = function(date) {
                        var disable = true;
                        // Create ymdDate manually (10x faster than dojo.date.locale.format)
                        var month = (date.getMonth()<9 ? '0' + (date.getMonth()+1) : date.getMonth()+1);
                        var day = (date.getDate()<10 ? '0' + date.getDate() : date.getDate());
                        var ymdDate = date.getFullYear() + '-' + month + '-' + day;
                        // Loop through array returned from XHR request, if it contains current date then
                        // current date should not be disabled
                        for (key in issueDates) {
                            if (issueDates[key] == ymdDate) {
                                disable = false;
                                break;
                            }
                        }
                        return disable;
                    };
                    calendar._populateGrid(); // Refresh calendar display
                }
            },
            // Log any errors to console (except when XHR request is cancelled)
            error: function(args) {
                if (args.dojoType == 'cancel') {
                    // Request cancelled
                } else {
                    console.error(args);
                }
            }
        });
    },
    onClose: function() {
        // If an existing xhr request is still running, cancel it before starting a new one
        if (this._xhr) {
            this._xhr.cancel();
        }
    }
});

Answer 2

AMD风格： dojo 1.7.1 中的 CalendarLite.js.uncompressed.js 包含 isDisabledDate 功能：

isDisabledDate: function(/*===== dateObject, locale =====*/){
    // summary:
    //      May be overridden to disable certain dates in the calendar e.g. `isDisabledDate=dojo.date.locale.isWeekend`
    // dateObject: Date
    // locale: String?
    // tags:
    //      extension
/*=====
    return false; // Boolean
=====*/
},
...

您可以使用此示例重新实现该功能：

var myCalendar = declare(Calendar, {
    datesToDisable : [],

    constructor: function(args) {
        this.inherited("constructor", arguments);
        this.datesToDisable = args.datesToDisable;
    },

    isDisabledDate: function(/*Date*/date, /*String?*/locale){
        return array.some(this.datesToDisable, function(item) {
            return dojo.compare(item, date, "date") === 0;
        });
    }
});

然后，您可以使用以下构造函数和datesToDisable参数来指定数组。

var someCalendar = new myCalendar({datesToDisable: [new Date(...),....,new Date(....)]},...);

或试试这个快速而肮脏的解决方案：

var someCalendar = new Calendar(...);
someCalendar.datesToDisable = [new Date(...),....,new Date(....)];
someCalendar.isDisabledDate = function(/*Date*/date, /*String?*/locale){
        return array.some(this.datesToDisable, function(item) {
            return date.compare(item, date, "date") === 0;
        });
}

但我会推荐第一个方法。假设你知道AMD的风格是为了“导入” dijit / Calendar ， dojo / _base / array 和 dojo / date （对于“date.compare（）”工作）。

干杯！

Answer 3

您可以在数组中添加带有时间戳的假日列表，并使用indexOf方法查找匹配日期，同时在isDisabledDate的覆盖函数中填充日历

var holidays = new Array();
var holidDt = new Date("October 2, 2012");
holidays.push(holidDt.getTime());

现在访问假日数组并检查它的存在。如果存在禁用，则通过覆盖isDisabledDate功能

启用

isDisabledDate: function(d) {
    var dt = new Date(d);
    var dayN = dt.getDay();
    dt.setHours(0, 0, 0, 0);
    /**
     * Condition for 
     * 1. Weekends
     * 2. Holidays (holiday array needs to be updated with holiday times)
     */
    return ((!((dayN > 0) && (dayN < 6))) || (arrayUtil.indexOf(holidays, dt.getTime()) >= 0));
}

Dojo的dijit.calendar和isDisabledDate

3 个答案: