如何在 jquery ui 选择输入中设置日期

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).

Answer 1

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 .