CODEWITHSUNDEEP
jquerydatepicker
Klav
Klav

Reputation: 405

jquery UI Datepicker fails to update month or year -- must select date

Datepicker selection does not change the year or month unless the user selects a date. Looking for month/year to update even if date is not selected:

<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');
        });

    });

Upvotes: 1

Views: 3527

Answers (3)

Les Nightingill
Les Nightingill

Reputation: 6156

Sebastian Barth's solution works just fine, but if you are using a different date format, it can be a little picky about the format you use in the datepicker('setDate',xxx) method, and behaves strangely if you don't get it exactly right. So better to be 'DRY' about the format and specify it in just one place.

Also datepicker itself handles date preservation when changing months so no need to do the calculations of the number of days in the month.

So here's a furthe improved version of Sebastian Barth's improved version!

$(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>

Upvotes: 3

Sebastian Barth
Sebastian Barth

Reputation: 4521

This version preserves the day of the month. It is an improved version of the answer of 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>

Upvotes: 2

emshore
emshore

Reputation: 489

Here's an example that demonstrates updating the selected month and year when the month/year dropdown menus are changed or the month arrows are clicked without a date being directly selected. It arbitrarily sets the day to the 1st of each month, so you would need to modify if you wanted that to persist after a day has been selected.

$(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>

Upvotes: 2

Related Questions