Question

除非用户选择日期，否则Datepicker选择不会更改年份或月份。即使未选择日期，也要查找要更新的月/年：

<input class="childdob dateinput datepickers hasDatepicker valid" 
placeholder="Date of Birth*" name="child_dob[0]" type="text">


$(function() {

        $('form').on('focus', '.datepickers', function(event){
            event.preventDefault();
                 $(this).datepicker( {
                    changeMonth: true,
                    changeYear: true,
                    yearRange: '1990:+0',
                    showButtonPanel: true,
                    dateFormat: 'mm/dd/y',
                    constrainInput: false
                }).datepicker('show');
        });

    });

Answer 1

这是一个示例，演示如何更新月/年下拉菜单或单击月份箭头而不直接选择日期时更新所选月份和年份。它任意将日期设置为每月的第1天，因此如果您希望在选择一天后保留该日期，则需要进行修改。

$(function() {
  $(".datepickers").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: '1990:+0',
    showButtonPanel: true,
    dateFormat: 'mm/dd/yy',
    constrainInput: false,
    onChangeMonthYear: function(year, month) {
      var selectedMonth = month;
      var selectedYear = year;
      $(this).datepicker("setDate", month + "/01/" + year);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" class="datepickers"></p>

Answer 2

此版本会保留当月的日期。 它是emshore答案的改进版本：

$(function() {
  $(".datepickers").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: '1990:+0',
    showButtonPanel: true,
    dateFormat: 'mm/dd/yy',
    constrainInput: false,
    onChangeMonthYear: function (year, month) {
      var $datepicker = jQuery(this);
      var date = new Date($datepicker.datepicker("getDate"));
      var lastDayOfMonth = new Date(year, month, 0).getDate();
      var preservedDay = Math.min(lastDayOfMonth, Math.max(1, date.getDate()));
      $datepicker.datepicker("setDate", month + "/" + preservedDay + "/" + year);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" class="datepickers"></p>

Answer 3

Sebastian Barth's solution可以正常工作，但是如果您使用其他日期格式，则对datepicker('setDate',xxx)方法中使用的格式可能会有些挑剔，如果不使用，则表现会很奇怪完全正确。因此最好对格式进行“干燥”并在一个地方指定它。

当更改月份时，datepicker本身也会处理日期保留，因此无需计算月份中的天数。

所以这是塞巴斯蒂安·巴特（Sebastian Barth）改进版本的进一步改进版本！

$(function() {
  $(".datepickers").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths:3,
    defaultDate:'+1w',
    maxDate:new Date(),
    yearRange: '1990:+0',
    showButtonPanel: true,
    dateFormat: 'yy, M d',
    constrainInput: false,
    onChangeMonthYear: function(year, month, inst) {
      var format = inst.settings.dateFormat
      var selectedDate = new Date(inst.selectedYear,inst.selectedMonth,inst.selectedDay)
      var date = $.datepicker.formatDate(format, selectedDate);
      $(this).datepicker("setDate", date);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" class="datepickers"></p>

jquery UI Datepicker无法更新月份或年份 - 必须选择日期

3 个答案: