Question

我分别按升序申请，提交和批准设置三个日期，并使用jquery datepicker进行相同的设置。 javascript代码如下：

  $('#startDate,#completionDate,#due_date').datepick({
    onSelect: customRange
});

function customRange(dates) {
    if (this.id == 'startDate') {
        $('#due_date').datepick('option', 'minDate', dates[0] || null);
    } else if (this.id == 'due_date') {
        $('#startDate').datepick('option', 'maxDate', dates[0] || null);
        $('#completionDate').datepick('option', 'minDate', dates[0] || null);
    } else {
        $('#due_date').datepick('option', 'maxDate', dates[0] || null);
    }
}

但是当我选择点击时，即使我清除了完成日期，也没有调用该函数，due_date仍然受限制。

jsFiddle是here

更新即使使用简单的范围选择range jsfiddle，问题也是如此。单击clear时调用函数customRange并传递undefined值。但minDate或maxDate不会更改。这在网站jquery datepicker

上也是如此

$('#startDate,#completionDate').datepick({
    onSelect: customRange
});


function customRange(dates) { 
   alert(dates[0]);
    if (this.id == 'startDate') { 
        $('#completionDate ').datepick('option','minDate', dates[0] || null); 
    } 
    else { 
        $('#startDate').datepick('option','maxDate', dates[0] || null); 
    } 
}

Answer 1

我认为函数_optionPlugin中的插件存在问题，null无法设置...

代码：

_optionPlugin: function(target, options, value) {
    target = $(target);
    var inst = target.data(this.propertyName);
    // HERE!
    if (!options || (typeof options == 'string' && value == null)) { // Get option
        var name = options;
        options = (inst || {}).options;
        return (options && name ? options[name] : options);
    }

    if (!target.hasClass(this.markerClassName)) {
        return;
    }
    options = options || {};
    if (typeof options == 'string') {
        var name = options;
        options = {};
        options[name] = value;
    }
    if (options.calendar && options.calendar != inst.options.calendar) {
        var discardDate = function(name) {
            return (typeof inst.options[name] == 'object' ? null : inst.options[name]);
        };
        options = $.extend({defaultDate: discardDate('defaultDate'),
            minDate: discardDate('minDate'), maxDate: discardDate('maxDate')}, options);
        inst.selectedDates = [];
        inst.drawDate = null;
    }
    var dates = inst.selectedDates;
    $.extend(inst.options, options);
    this._setDatePlugin(target[0], dates, null, false, true);
    inst.pickingRange = false;
    inst.drawDate = plugin.newDate(this._checkMinMax(
        (inst.options.defaultDate ? inst.get('defaultDate') : inst.drawDate) ||
        inst.get('defaultDate') || plugin.today(), inst));
    if (!inst.inline) {
        this._attachments(target, inst);
    }
    if (inst.inline || inst.div) {
        this._update(target[0]);
    }
},

您可以要求开发者解决问题，或者设置最小日期，如：

$('#startDate,#completionDate').datepick({
    onSelect: customRange
});

function customRange(dates) { 
    var demo=dates[0] || 'null'
    if (this.id == 'startDate') { 
    $('#completionDate ').datepick('option','minDate', dates[0] || new Date(0)); 
    } 
    else { 
        $('#startDate').datepick('option','maxDate', dates[0] || new Date(2099,12,31)); 
    } 
}

演示：http://jsfiddle.net/IrvinDominin/f7pVh/

如果你想隐藏清除和关闭使用：

.datepick-cmd-clear {
    display: none
}
.datepick-cmd-close {
    display: none
}

演示：http://jsfiddle.net/IrvinDominin/j8t7v/

Answer 2

_optionPlugin中有一个错误更改函数的开头，如下所示：

_optionPlugin: function(target, options, value) {
    target = $(target);
    var inst = target.data(this.propertyName);
    if (!options || (typeof options == 'string' && typeof value == 'undefined')) { // Get option
        ...

Answer 3

作为一个完整的答案，我不会对你的代码进行分析，但我已经分析了你的代码并测试了许多情况，我的建议是使用onClose 而不是onSelect

并且主要问题是关闭NULL和[]两者都应用了清除日期，但在这种情况下有时会返回null的未定义值。

jQuery UI Datepicker范围选择三个日期

3 个答案: