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日に任意に設定されるため、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>