CODEWITHSUNDEEP
jqueryjquery-ui
Sperick
Sperick

Reputation: 2761

DatePicker not setting Year unless dropdown is changed explicitly when original Year is outside dropdown range

I have set up a JQuery DatePicker with the following code:

       $('input[data-type="calendar"]').each(function ()
        {
            $(this).datepicker(
            {

                dateFormat: 'mm/dd/yy',
                yearRange: "-1:+10",
                changeMonth: true,
                changeYear: true,
                buttonText: "Select date",
                showOn: "both",
                buttonImage: "../Images/calendar.jpg",
                buttonImageOnly: true,
                setDate: "-0d",
                defaultDate: 0
            });
        });

The problem with this is that if the original date in the datepicker has a Year that is outside the range of the Year dropdown (2020-2031) then if I only change the date using the Calendar the Year does not change to the default Dropdown Year (2020).

Example: Date in textbox is 01/01/1900

I open the calendar. The Month drodown displays "Jan" and the Year dropdown displays "2020".

I don't change either of them. Instead I change the date to the 15th of the month.

What I want: Date to be 01/15/2020

What actually displays: 01/15/1900

What do I need to do to have the date use the current value in the dropdown without me having to change the year to some other year and back again?

Upvotes: 0

Views: 557

Answers (2)

Bernhard Beatus
Bernhard Beatus

Reputation: 1216

$(function() {
  $('input[data-type="calendar"]').each(function(i, el) {
    $(el).datepicker({
      dateFormat: 'mm/dd/yy',
      yearRange: "-150:+0",
      changeMonth: true,
      changeYear: true,
      buttonText: "Select date",
      showOn: "both",
      buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonImageOnly: true,
      setDate: "-0d",
      defaultDate: 0
    });
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<div>
  <p>Date 1: <input type="text" id="datepicker-1" data-type="calendar" /></p>
</div>
<div>
  <p>Date 2: <input type="text" id="datepicker-2" data-type="calendar" /></p>
</div>
<div>
  <p>Date 3: <input type="text" id="datepicker-3" data-type="calendar" /></p>
</div>

Change the yearRange to yearRange: "-150:+0". So that's it.

Upvotes: 0

Twisty
Twisty

Reputation: 30893

I am unable to replicate the issue as you described it. Consider the following example I constructed.

$(function() {
  $('input[data-type="calendar"]').each(function(i, el) {
    $(el).datepicker({
      dateFormat: 'mm/dd/yy',
      yearRange: "-1:+10",
      changeMonth: true,
      changeYear: true,
      buttonText: "Select date",
      showOn: "both",
      buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonImageOnly: true,
      setDate: "-0d",
      defaultDate: 0,
      minDate: "01/01/2020",
      maxDate: "12/31/2030"
    });
    $(el).datepicker("setDate", new Date());
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<div>
  <p>Date 1: <input type="text" id="datepicker-1" data-type="calendar" /></p>
</div>
<div>
  <p>Date 2: <input type="text" id="datepicker-2" data-type="calendar" /></p>
</div>
<div>
  <p>Date 3: <input type="text" id="datepicker-3" data-type="calendar" /></p>
</div>

All dates show today, 03/31/2021.

This will use the Date from the browser. The Browser gets the date from the OS. You may need to ensure that Date and Time are configured correctly on your test device.

Update

To constrict the Range further, you want to add minDate and maxDate options.

A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

If the User manually enters a date, and then clicks a date in the UI, it will return the the proper Year.

  minDate: "01/01/2020",
  maxDate: "12/31/2030"

Upvotes: 1

Related Questions