jquery UI Datepicker 無法更新月份或年份 — 必須選擇日期

Question

除非用戶選擇日期，否則日期選擇器選擇不會更改年或月。 即使未選擇日期，也要查找要更新的月/年：

<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 的解決方案工作得很好，但如果您使用不同的日期格式，它可能對您在datepicker('setDate',xxx)方法中使用的格式有點挑剔，如果您不明白它的行為會很奇怪完全正確。 所以最好對格式保持“干燥”並在一個地方指定它。

日期選擇器本身也在更改月份時處理日期保存，因此無需計算該月的天數。

所以這是 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>