使用 jQuery 创建两个日期选取器日期范围实例

Using jQuery to create two datepicker date-range instances

本文关键字：日期 选取 范围 实例 两个 创建 jQuery 使用      更新时间：2023-09-26

我有两种日期范围形式。每个表单有 2 个字段，一个from和to。在 javascript 中，我创建了日期范围日期选择器的两个实例，但由于某种原因，在第二个日期范围形式中，它不能正常工作。

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

我在下面有一个JS小提琴，所以你可以看到发生了什么。我已经搜索了周围，但我找不到两个日期范围形式的任何工作示例。我可以找到很多默认的日期选择器，但它们当然不是日期范围并且写得不同，它们的常见问题是人们使用相同的 ID，但是我的都是不同的，所以我不明白。

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

工作演示 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);
    }
});
相关文章：