使用jQuery创建两个datepicker日期范围实例

时间:2013-10-09 09:32:39

标签: javascript jquery html datepicker

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

第一种形式完美无缺。但是,当我在第二种形式的from框中选择日期时,例如10月9日,它会在from框中显示。当我点击第二种形式的to字段时,我可以选择的最晚日期是10月9日出于某种原因?

我下面有一个JS小提琴,所以你可以看到发生了什么。我已经四处寻找,但我找不到两个日期范围形式的任何工作示例。我可以找到很多默认的日期选择器,但它们当然不是日期范围和写的不同而且它们的常见问题是人们使用相同的ID,但是我的都是不同的所以我不明白... < / p>

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

1 个答案:

答案 0 :(得分:3)

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

罪魁祸首是:您的旧代码中的var option = this.id == "invfrom" ? "minDate" : "maxDate",代码行有错误,即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);
    }
});