2

我有两个日期范围表格。每个表单有 2 个字段,afromto。在 javascript 中,我创建了日期范围 datepicker 的两个实例,但由于某种原因,在第二个日期范围表单中,它不能正常工作。

第一种形式完美运行。但是,当我from在第二种形式的框中选择一个日期时,例如 10 月 9 日,它会在from框中显示该日期。然后,当我单击to第二种形式的字段时,出于某种原因,我可以选择的最远日期是 10 月 9 日?

我在下面有一个 JS Fiddle,所以你可以看到发生了什么。我四处搜索,但找不到两个日期范围表格的任何工作示例。我可以找到很多默认的日期选择器,但它们当然不是日期范围并且写得不同,而且它们通常的问题是人们使用相同的 ID,但是我的都不同,所以我不明白..

JS 小提琴 - http://jsfiddle.net/6jJ36/

4

1 回答 1

3

工作演示 http://jsfiddle.net/fxr5c/

罪魁祸首是:var option = this.id == "invfrom" ? "minDate" : "maxDate",您的旧代码中的代码行您的 id 错误,即ivnfrom与行为相反。

休息一下,这应该有助于您的事业:)

代码

var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    dateFormat: 'dd/mm/yy',
    onSelect: function (selectedDate) {

        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(
            instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
            selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});
var invdates = $("#invfrom, #invto").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    dateFormat: 'dd/mm/yy',
    onSelect: function (selectedDate) {

        var option = this.id == "invfrom" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(
            instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
            selectedDate, instance.settings);
        invdates.not(this).datepicker("option", option, date);
    }
});
于 2013-10-09T09:41:25.597 回答