Set multiple datepickers' value based on one datepicker's selected date

问题

I have follow jQuery UI Datepicker sample code

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
        $(function () {
            $("#datepicker1").datepicker();
            $("#datepicker1").change(function () {
                alert($(this).val());
                var date = $(this).datepicker();
                $("#datepicker2").val("option", "dd-mm-yy", $(this).val());
                //alert($( "#datepicker2" ).val());
            });
        });
    </script>
</head>
<body>
    <p>Date1: <input type="text" id="datepicker1"></p>
    <p>Date2: <input type="text" id="datepicker2"></p>
    <p>Date3: <input type="text" id="datepicker3"></p>
    <p>Date4: <input type="text" id="datepicker4"></p>
</body>
</html>

I want to set date pickers 2,3 and 4's value based on value selected in datepicker1.

Let say if #datepicker1 have valud 12/05/2013 then I would like to show +1 date for each other jQuery datepickers like below

datepicker1 => 12/05/2013 then
datepicker2 => 12/06/2013
datepicker3 => 12/07/2013
datepicker4 => 12/08/2013

I tried above.

Can you please help?

回答1:

You can use the onSelect event and call setDate method:

$("#datepicker1, #datepicker2, #datepicker3, #datepicker4").datepicker();
$("#datepicker1").datepicker("option", "onSelect", function (dateText, inst) {
    var date1 = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);

    var date2 = new Date(date1.getTime());
    date2.setDate(date2.getDate() + 1);
    $("#datepicker2").datepicker("setDate", date2);

    var date3 = new Date(date1.getTime());
    date3.setDate(date3.getDate() + 2);
    $("#datepicker3").datepicker("setDate", date3);

    var date4 = new Date(date1.getTime());
    date4.setDate(date4.getDate() + 3);
    $("#datepicker4").datepicker("setDate", date4);
});

Demo here

The onSelect passes the date as a string so we convert it to JavaScript Date object for convenience, using the following jQuery UI datepicker utility function:

$.datepicker.parseDate( format, value[, settings] )

The expression:

inst.settings.dateFormat || $.datepicker._defaults.dateFormat

means use the dateFormat value specified on the datepicker, if there is one; otherwise use the dateFormat from datepicker defaults (which is "mm/dd/yy").

来源：https://stackoverflow.com/questions/20397247/set-multiple-datepickers-value-based-on-one-datepickers-selected-date

标签

javascript

jquery

jquery-ui

date

jquery-ui-datepicker