Datepicker formatDate

Question

i need to change my format date in date picker from "12/25/2022"(for example) on "25/December/2022"

heres my code:

$(".date-picker").datepicker({
  format: 'dd-mm-yyyy',
  minDate: 0,
  numberOfMonths: \[3,1\],
  beforeShowDay: function(date) {
    var date1 = $.datepicker.parseDate($.datepicker.\_defaults.dateFormat, $("#input1").val());
    var date2 = $.datepicker.parseDate($.datepicker.\_defaults.dateFormat, $("#input2").val());
    return \[true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date \>= date1 && date \<= date2)) ? "dp-highlight" : ""\];
  },
  onSelect: function(dateText, inst) {
    var date1 = $.datepicker.parseDate($.datepicker.\_defaults.dateFormat, $("#input1").val());
    var date2 = $.datepicker.parseDate($.datepicker.\_defaults.dateFormat, $("#input2").val());
    var selectedDate = $.datepicker.parseDate($.datepicker.\_defaults.dateFormat, dateText);

    if (!date1 || date2) {
      $("#input1").val(dateText);
      $("#input2").val("");
      $(this).datepicker();
    } else if( selectedDate < date1 ) {
      $("#input2").val( $("#input1").val() );
      $("#input1").val( dateText );
      $(this).datepicker();
    } else {
      $("#input2").val(dateText);
      $(this).datepicker();
    }
  }
});

Answer 1

Consider the following.

$(function() {
  var dFormat = 'dd/MM/yy';

  $(".date-picker").datepicker({
    dateFormat: dFormat,
    minDate: 0,
    numberOfMonths: [3, 1],
    beforeShowDay: function(date) {
      var date1 = $.datepicker.parseDate(dFormat, $("#input-1").val());
      var date2 = $.datepicker.parseDate(dFormat, $("#input-2").val());
      var result = [true, ""];
      if (date1 && (date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) {
        result[1] = "ui-state-highlight";
      }
      return result;
    },
    onSelect: function(dateText) {
      var date1 = $("#input-1").datepicker("getDate");
      var date2 = $("#input-2").datepicker("getDate");
      var selectedDate = $.datepicker.parseDate(dFormat, dateText);

      if (!date1 || date2) {
        $("#input-1").datepicker("setDate", dateText);
      } else if (selectedDate < date1) {
        $("#input-2").datepicker("setDate", $("#input1").datepicker("getDate"));
        $("#input-1").datepicker("setDate", dateText);
      } else {
        $("#input-2").datepicker("setDate", dateText);
      }
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<p>Start: <input type="text" id="input-1" class="date-picker" value="25/March/2022"> End: <input type="text" id="input-2" class="date-picker" value="31/March/2022"></p>

The logic in onSelect is not clear. I tried to clean it up, yet I cannot determine what you were trying to accomplish.

For dateFormat, use dd/MM/yy. Breakdown:

• dd - day of month (two digit)
• MM - month name long
• yy - year (four digit)

Details: https://api.jqueryui.com/datepicker/#utility-formatDate