2011-05-20 25 views
4

我有一个使用标准jQuery UI的多个日期选择器文本字段的页面。我想将默认日期选择器日期设置为所有空白字段的最后选定日期或月份,因此用户不必手动更改他们选择的每个日期选择器的月份。记住跨越多个字段的jQuery UI日期选择器中最后选择的月份

我已经尝试通过日期选择器的onSelect函数将日期值存储在变量中,但我不确定如何绑定defaultDate属性,以便使用最后选择的日期更新所有日期选择器。

以下是基本代码。同样,如果用户将其中一个日期文本框设置为10/20/2011,则当他或她通过任何空白文本框打开另一个日期选择器时,日期选择器应默认显示10月份(不是当前的当前日期)。

<!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" href="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> 

回答

3

如何:

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

使用defaultDate选项和onSelect事件。

下面是一个工作示例:http://jsfiddle.net/MXHdj/

相关问题