jquery datepicker onselect year

时间:2016-08-17 06:41:13

标签: jquery jquery-ui-datepicker

我从下拉开始只选择一年。这是我的代码:

$('#year1').datepicker( {
    changeMonth: false,
    changeYear: true,
    showButtonPanel: false,
    dateFormat: 'yy',
    yearRange: "-2:+0",
    onClose: function(dateText, inst) { 
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, 1, 1));
    }
});

现在我想从下拉菜单中选择年份时关闭面板。但它并没有在选择年份时关闭。但当我点击其他任何地方时它会被关闭。我尝试了onSelect onClose事件,但这个事件并没有在选择年份时触发。我认为这个事件会在选择日期时触发。当我从下来选择年份时,任何人都可以帮我关闭它。 感谢。

1 个答案:

答案 0 :(得分:1)

当用户从下拉列表中选择一年时,您可以使用onChangeMonthYear选项来运行您的功能。然后,您可以使用hide()方法“关闭”选择器。

这是一个代码示例:

$('#year1').datepicker( {
  changeMonth: false,
  changeYear: true,
  showButtonPanel: false,
  dateFormat: 'yy',
  yearRange: "-2:+0",
  onChangeMonthYear: function(year, month, inst){
    // Set date to picker
    $(this).datepicker('setDate', new Date(year, 1, 1));
    // Hide (close) the picker
    $(this).datepicker('hide');
    // Blur to let the picker open on focus in
    $(this).blur();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>

<input type="text" id="year1">