Question

我在一个页面中使用多个表单。所有表单都使用相同设置的datepicker。因为我不能在两个元素上使用相同的ID，所以我不得不复制代码。有没有更好的方法呢？

     $("#datepicker1").datepicker({
        defaultDate: "+1w",
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        minDate: 0,
        numberOfMonths: 1,
        onClose: function (selectedDate) {
            var d = new Date(selectedDate);
            d.setDate(d.getDate() + 90);
            $("#datepicker2").datepicker("option", "minDate", selectedDate);
            $("#datepicker2").datepicker("option", "maxDate", d);
        }
    });
    $("#datepicker2").datepicker({
        defaultDate: "+1w",
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        minDate: +1,
        numberOfMonths: 1,
        onClose: function (selectedDate) {
            $("#datepicker1").datepicker("option", "maxDate", selectedDate);
        }
    });
    $("#datepicker3").datepicker({
        defaultDate: "+1w",
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        minDate: 0,
        numberOfMonths: 1,
        onClose: function (selectedDate) {
            var d = new Date(selectedDate);
            d.setDate(d.getDate() + 90);
            $("#datepicker4").datepicker("option", "minDate", selectedDate);
            $("#datepicker4").datepicker("option", "maxDate", d);
        }
    });
    $("#datepicker4").datepicker({
        defaultDate: "+1w",
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        minDate: +1,
        numberOfMonths: 1,
        onClose: function (selectedDate) {
            $("#datepicker3").datepicker("option", "maxDate", selectedDate);
        }
    });
    $("#datep

icker5").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: 0,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $("#datepicker6").datepicker("option", "minDate", selectedDate);
        $("#datepicker6").datepicker("option", "maxDate", d);
    }
});
$("#datepicker6").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: +1,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#datepicker5").datepicker("option", "maxDate", selectedDate);
    }
});
$("#datepicker7").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: 0,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $("#datepicker8").datepicker("option", "minDate", selectedDate);
        $("#datepicker8").datepicker("option", "maxDate", d);
    }
});
$("#datepicker8").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: +1,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#datepicker7").datepicker("option", "maxDate", selectedDate);
    }
});

Answer 1

Here is Demo

您可以使用class：

<input type="text" class="datepicker" id="date_1" />
<input type="text" class="datepicker" id="date_2" />
<input type="text" class="datepicker" id="date_3" />

$(".datepicker").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: +1,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#OutwardDate").datepicker("option", "maxDate", selectedDate);
    }
});

Answer 2

在每个元素上设置一个css类，并针对该类调用.datepicker（）。例如，$（“。dateField”）。datepicker（{...}）;

Answer 3

尝试使用类并相应地设置datepicker而不是单个ID。

我使用了四个类，因为onClose事件中有不同的选项和不同的操作。

代码：

$(".datepicker1").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: 0,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $("#DateTo").datepicker("option", "minDate", selectedDate);
        $("#DateTo").datepicker("option", "maxDate", d);
    }
});
$(".datepicker2").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: +1,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#DateFrom").datepicker("option", "maxDate", selectedDate);
    }
});
$(".datepicker3").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: 0,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $("#ReturnDate").datepicker("option", "minDate", selectedDate);
        $("#ReturnDate").datepicker("option", "maxDate", d);
    }
});
$(".datepicker4").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: +1,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#OutwardDate").datepicker("option", "maxDate", selectedDate);
    }
});

演示：http://jsfiddle.net/A6pe6/

Answer 4

使用公共类名称选择器而不是不同的ID。使用多个ID可能会占用CPU时间。

$(".YourCommonClassName").datepicker({
//DataPicker parameters..
});

Answer 5

由于它们各不相同，或者至少是close回调和mindate，您可以定义一个公共设置对象，并在所有对象中使用它来使其更容易

var settings = {
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    numberOfMonths: 1
}
$(".datepicker1").datepicker($.extend(settings, {
    minDate: 0,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $(".datepicker2", $(this).closest('form')).datepicker("option", "minDate", selectedDate);
        $(".datepicker2", $(this).closest('form')).datepicker("option", "maxDate", d);
    }})
);
$(".datepicker2").datepicker($.extend(settings, {
    minDate: 1,
    onClose: function (selectedDate) {
        $(".datepicker1", $(this).closest('form')).datepicker("option", "maxDate", selectedDate);
    }})
);
$(".datepicker3").datepicker($.extend(settings, {
    minDate: 0,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $(".datepicker4", $(this).closest('form')).datepicker("option", "minDate", selectedDate);
        $(".datepicker4", $(this).closest('form')).datepicker("option", "maxDate", d);
    }})
);
$(".datepicker4").datepicker($.extend(settings, {
    minDate: 1,
    onClose: function (selectedDate) {
        $(".datepicker3", $(this).closest('form')).datepicker("option", "maxDate", selectedDate);
    }})
);

FIDDLE

多个jQuery Datepickers多种形式

5 个答案: