How to set date in jquery ui select inputs

Question

Good evening everyone, I created a JQuery Ui datepicker for months and years, here's the code:

  $.datepicker.setDefaults($.datepicker.regional["pt-BR"]);
  $(datePickerId).datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel:true,
    maxDate: "+3m",
    minDate: "-2y",
    onClose: function(dateText, inst) {
      $(this).prop('disabled', true);
      let month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      let year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      let givenDate = new Date(year, month, 1);
      $(this).datepicker('setDate', givenDate);
      //Do something with AJAX
    }
  });
  $(datePickerId).datepicker("setDate", "0")

My question is, when the user will select the date the input is something like this:

And this image is the perfect example, in this case the user had selected the month of August, but as soon as he clicked on the datepicker again the datepicker picked up the default date that is set to bring when it runs for the first time (todays month/year), when the user selects a new month/year how could I make the code "remember" which was selected in the onClose method and then bring it correctly? Thank you very much in advance.

Edit to fully describe what I actually want to do: User opens the calendar, it starts with the actual month and year, user chooses July/2019, clicks ok, an AJAX request is done to the server to pick some information for the given month, user clicks datepicker again, the calendar shows up, when this happens the inputs from month and year (see image for reference) should be at July/2019 (the last month/year user choosed).

What is your intention with `givenDate` in your `onClose` ? That's what's causing the date to change `onClose`... — devlin carnate, Sep 28 '20 at 22:27
Does this answer your question? [Jquery DatePicker Set default date](https://stackoverflow.com/questions/14580749/jquery-datepicker-set-default-date) — devlin carnate, Sep 28 '20 at 22:29
you can set a variable onclick or use localstorage, then use an if/else to check if the variable is null on initial load. — MVB76, Sep 28 '20 at 22:38
I need the givenDate in order to do an AJAX request later with the date when the user closes the datepicker. — Nícolas Teixeira, Sep 28 '20 at 22:38
Not much devlin carnate :/ What I really want to do is for example: User opens the calendar, it starts with the actual month and year, user chooses July/2019, checks ok, an AJAX request is done to the server to pick some information for the given month, user clicks datepicker again, when this happens the inputs from month and year should be at July/2019. — Nícolas Teixeira, Sep 28 '20 at 22:41
what is the `dataFormat` you are using in your datePicker code - i do not see any? — Always Helping, Sep 29 '20 at 02:18
It's MM yy, I have it inside the regional file (not the best way to do it tbh). — Nícolas Teixeira, Sep 29 '20 at 10:56
What is the value of `month`? If it is '8` in the case of choosing August, your `givenDate` will be in September, since JavaScript months are zero-based. — Heretic Monkey, Sep 29 '20 at 15:06

score 1 · Accepted Answer · answered Sep 29 '20 at 14:56

Consider the following example.

$(function() {
  $("#myDate").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "MM yy",
    showButtonPanel: true,
    maxDate: "+3m",
    minDate: "-2y",
    onClose: function(dateText, inst) {
      $(this).prop('disabled', true);
      var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      m = parseInt(m) + 1;
      m = (m < 10 ? "0" + m : m);
      var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      var dt = new Date(y + "-" + m + "-01T00:00:01");
      $(this).datepicker( "option", "defaultDate", dt ).datepicker("setDate", dt);
      //Do something with AJAX
      $(this).prop('disabled', false);
    }
  }).datepicker("setDate", "0");
});

.ui-datepicker .ui-datepicker-calendar,
.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-current {
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date: <input type="text" id="myDate" />

In addition to setDate you must also reset the defaultDate.

You've done a bit more than just resetting `defaultDate` in the answer. You've also fixed an off-by-one error with the month value, which I would think would be important to call out. — Heretic Monkey, Sep 29 '20 at 15:06
@HereticMonkey that is only needed due to the format for `Date` I use. If I had done, `new Date(y, m, 1);`, the `monthIndex` would have been correct. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#Examples — Twisty, Sep 29 '20 at 15:13
I'm well aware of how Dates are constructed, thank you. What I didn't know is how month values are represented in the jQuery UI calendar's dropdowns. I would think it would be better to keep that code the same and only introduce the necessary change, but that's me. — Heretic Monkey, Sep 29 '20 at 15:25

How to set date in jquery ui select inputs

1 Answers1