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?

Solution 1

Here's one specific for your code:

var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

More general info available here:

• http://api.jqueryui.com/datepicker/#option-dateFormat
• http://api.jqueryui.com/datepicker/#utility-formatDate

Solution 2

inside the jQuery script code just paste the code.

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

this should work.

Solution 3

The getDate method of datepicker returns a date type, not a string.

You need to format the returned value to a string using your date format. Use datepicker's formatDate function:

var dateTypeVar = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('dd-mm-yy', dateTypeVar);

The full list of format specifiers is available here.

Solution 4

Here complete code for date picker with date format (yy/mm/dd).

Copy link below and paste in head tag :

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
       });
   </script>

Copy below code and paste between body tag :

      Date: <input type="text" id="datepicker" size="30"/>    

If you would like two(2) input type text like Start Date and End Date then use this script and change date format.

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#startdate").datepicker({ dateFormat: "dd-mm-yy" }).val()
               $("#enddate").datepicker({ dateFormat: "dd-mm-yy" }).val()
       });

   </script>  

Two input text like :

      Start Date: <input type="text" id="startdate" size="30"/>    
      End Date: <input type="text" id="enddate" size="30"/>

Solution 5

dateFormat

The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.

Code examples Initialize a datepicker with the dateFormat option specified.

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

Get or set the dateFormat option, after init.

//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

View more solutions

Comments

[Hein du Plessis]

Perfect, thanks, why doesn't $.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) ); work as in the documenation?

[Dave Jarvis]

.selector and #datepicker are not the same. Pasting your code verbatim would not work.

[Ravi Y]

How does this answer the original question about date formats?

[bluish]

It would have been better if you enriched @kcsoft answer (like I'm gonna do) instead of posting a new one ;)

[Ryan]

The first line of code in this example makes the "Date Picker" work with a specific date format, rather than the default American mm/dd/yy format.

[knocte]

@Ryan it doesn't work for me, do you have an example which includes all lines of code?

[Tommy]

This just gives me the same format as I specified in the datepicker and not dd-mm-yy. using version 1.10. The answear below works fine.

[SearchForKnowledge]

the yy is giving me 2015. How can I only get 15?

[Shadoath]

@SearchForKnowledge just use y. datepicker-formatting

[Sunil Kumar]

exactly copied from : jqueryui.com/resources/demos/datepicker/date-formats.html

[João Pimentel Ferreira]

pay attention that if you already previously defined a different format, this doesn't work, you should do then $("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy" ).val()

[TarangP]

in older versions format: 'dd-mm-yyyy', should work