Remembering the last selected month in jQuery UI datepicker across multiple fields
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/
精彩评论