jQuery UI DatePicker - Change Date Format

Question

I am using the UI DatePicker from jQuery UI as the stand alone picker. I have this code:

<div id="datepicker"></div>

And the following JS:

$('#datepicker').datepicker();

When I try to return the value with this code:

var date = $('#datepicker').datepicker('getDate');

I am returned this:

Tue Aug 25 2009 00:00:00 GMT+0100 (BST)

Which is totally the wrong format. Is there a way I can get it returned in the format DD-MM-YYYY?

Answer 1

Finally got the answer for datepicker date change method:

$('#formatdate').change(function(){
    $('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});

Answer 2

Here is an out of the box future proof date snippet. Firefox defaults to jquery ui datepicker. Otherwise HTML5 datepicker is used. If FF ever support HTML5 type="date" the script will simply be redundant. Dont forget the three dependencies are needed in the head tag.

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

<!--Form element uses HTML 5 type="date"-->
<div class="form-group row">
    <label for="date" class="col-sm-2 col-form-label"Date</label>
    <div class="col-sm-10">          
       <input type="date" class="form-control" name="date" id="date" placeholder="date">
    </div>
</div>

<!--if the user is using FireFox it          
autoconverts type='date' into type='text'. If the type is text the 
script below will assign the jquery ui datepicker with options-->
<script>
$(function() 
{
  var elem = document.createElement('input');
  elem.setAttribute('type', 'date');

  if ( elem.type === 'text' ) 
  {
    $('#date').datepicker();
    $( "#date" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );     
  }
});

Answer 3

getDate function returns a JavaScript date. Use the following code to format this date:

var dateObject = $("#datepicker").datepicker("getDate");
var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject);

It uses a utility function which is built into datepicker:

$.datepicker.formatDate( format, date, settings ) - Format a date into a string value with a specified format.

The full list of format specifiers is available here.

Answer 4

$("#datepicker").datepicker("getDate") returns a date object, not a string.

var dateObject = $("#datepicker").datepicker("getDate"); // get the date object
var dateString = dateObject.getFullYear() + '-' + (dateObject.getMonth() + 1) + '-' + dateObject.getDate();// Y-n-j in php date() format

Answer 5

Try to use the

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

and there is lots of option available For the datepicker you can find it Here

http://api.jqueryui.com/datepicker/

This is the way we call the datepicker with the parameter

$(function() {
      $('.selector').datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            numberOfMonths: 1,
            buttonImage: 'contact/calendar/calendar.gif',
            buttonImageOnly: true,
            onSelect: function(selectedDate) {
                 // we can write code here 
             }
      });
});

Answer 6

you can simply use this format in you function just like

     $(function() {  
        $( "#datepicker" ).datepicker({
            dateFormat: 'dd/mm/yy',
          changeMonth: true,
          changeYear: true
        });
      });

<input type="text" id="datepicker"></p>