How to change date picker format from "mm/dd/yy" to "yy/mm/dd"?

Question

I need to change the date format to insert it in database but unfortunately changing the dateFormat variable is not working. I have some validations to advance the date against the current date and to make the exceeding date un-clickable.

<script>
  $( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#sd" )
        .datepicker({
             showOn: "button",
            buttonImage: "images/cal-icon.png",
            buttonImageOnly: true,
          minDate: ("setDay, +4"),
          maxDate: "+3M +10D",
          changeMonth: true,
          numberOfMonths: 2
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#ed" ).datepicker({
            showOn: "button",
            buttonImage: "images/cal-icon.png",
            buttonImageOnly: true,
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });

    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }

      return date;
    }
  } );
  </script>

Where do you pass the `dateFormat` variable into the settings? — BenM, Oct 14 '16 at 14:33
Possible duplicate of [jQuery UI DatePicker - Change Date Format](http://stackoverflow.com/questions/1328025/jquery-ui-datepicker-change-date-format) — Kevin Kloet, Oct 14 '16 at 14:34

score 3 · Answer 1 · answered Oct 14 '16 at 14:35

3

You simply pass this as an option, although this question has been answered many times here on SO.

$( ".selector" ).datepicker({
   dateFormat: "yy-mm-dd"
});

answered Oct 14 '16 at 14:35

curv

3,796
4
33
48

adeneo · Answer 2 · 2016-10-14T14:48:56.357

You're doing it wrong, there's no need to parse the datestring back into some other format to set the maxDate and minDate options, all you have to do is use the built in getDate to get the selected date

$(function() {
    var from = $("#sd").datepicker({
            showOn: "button",
            buttonImage: "images/cal-icon.png",
            buttonImageOnly: true,
            minDate: ("setDay, +4"),
            maxDate: "+3M +10D",
            changeMonth: true,
            numberOfMonths: 2,
            onSelect : function(date, ui) {
             to.datepicker("option", "minDate", $(this).datepicker( 'getDate' ));
            }
        }),
        to = $("#ed").datepicker({
            showOn: "button",
            buttonImage: "images/cal-icon.png",
            buttonImageOnly: true,
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2,
            onSelect : function(date, ui) {
             from.datepicker("option", "maxDate", $(this).datepicker( 'getDate' ));
            }
        });
});

<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<input id="sd">
<br><br>
<input id="ed">

When you need the date of the input for something else, all you have to do is call $("#sd").datepicker( 'getDate' ) etc. and it will return a date object, regardless of the format used in the picker.

How to change date picker format from "mm/dd/yy" to "yy/mm/dd"?

2 Answers2