Question

我想知道是否有人知道如何更改JQueryUI Datepicker以在更改年份下拉列表时更新日期文本。

我正在使用的基础知识显示在http://jsfiddle.net/H94cc/238/

中

<input type="text" name="DOB" id="DOB" class="cat_textbox datepicker" value="10/10/1976" />


 // UI Date Picker
$(".datepicker").datepicker({ 
yearRange: '-80:-04' ,
changeYear: true,
changeMonth: true
});

$(".datepicker").datepicker({

    showOn: "both",
    buttonImage: "/images/calendar.png",
    buttonImageOnly: true
});

如果您点击文字，然后选择一年，然后点击其他地方而不再选择那一天它会关闭而不更新文字。

有谁知道如何解决这个问题？

Answer 1

使用onChangeMonthYear事件，如下所示：

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker - On change month,year</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        var changingDate = false;
        $('.datepicker').datepicker({
            yearRange: '-80:-04' ,
            changeYear: true,
            changeMonth: true,
            onChangeMonthYear: function(y, m, i) {
                var d = i.selectedDay;
                $(this).datepicker('setDate', new Date(y, m - 1, d));
            }
        });
      });
      </script>
    </head>
    <body>
    <input type="text" name="DOB" id="DOB" class="cat_textbox datepicker" value="10/10/1976" />
    </body>
    </html>

Answer 2

在更改事件发生时，使用datepicker中的setDate事件。

$target_node.change(function() {
   $your_date_node.datepicker({your_config})
                  .datepicker('setDate', your_date);
});

Answer 3

就我而言，出于某种原因＆＃34;我＆＃34;变量没有填充;它也是＆＃34; datepick（）＆＃34;而不是＆＃34; datepicker（）＆＃34; - 不确定使用了什么插件。

这就是我最终的工作：

    var datepicker = $('.datepicker').datepick({
       changeYear: true,
       changeMonth: true,
       onChangeMonthYear: function (y, m, i) {
          var date = $(this).datepick('getDate');
          var d = date[0].getDate();
          $(this).datepick('setDate', new Date(y, m - 1, d));
       }
});

JqueryUI Datepicker年份选择器不更新文本框文本

3 个答案: