Remembering the last selected month in jQuery UI datepicker across multiple fields_问答_开发者

Remembering the last selected month in jQuery UI datepicker across multiple fields

开发者 https://www.devze.com 2023-03-07 14:41 出处：网络

I have a page with multiple datepicker textfields using the standard jQuery UI.I would like to set the default datepicker date to the last selected day or month for all blank fields, so the user doesn

I have a page with multiple datepicker textfields using the standard jQuery UI. I would like to set the default datepicker date to the last selected day or month for all blank fields, so the user doesn't have to manually change the month for each datepicker they select.

I have tried storing the date value in a variable via the onSelect function of the datepicker, but am unsure how to bind the defaultDate property so it updates all datepickers with whatever the last selected date was.

Below is the basic code. Again, if a user sets one of the date textfields to 10/20/2011, when he or she opens another datepicker through any of the blank textfields the datepicker should display the month of October by default (not today's current date).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" h开发者_运维百科ref="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css" />

    <script type="text/javascript">
        $(document).ready(function() {

            $(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
</head>

<body>

    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" />

</body>

</html>

How about:

$(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(dateText, inst) {
        $(".datepicker").datepicker("option", "defaultDate", dateText);
    }
});

Using the defaultDate option and the onSelect event.

Here's a working example: http://jsfiddle.net/MXHdj/