Advertisement
Advertisement


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?

2017/03/05
1
554
3/5/2017 12:42:19 AM

Accepted Answer

Here's one specific for your code:

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

More general info available here:

2018/06/21
972
6/21/2018 1:34:16 PM

inside the jQuery script code just paste the code.

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

this should work.

2011/05/11

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.

2013/01/09

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"/>
2013/01/09

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' );
2013/01/09

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.

2014/01/21

Source: https://stackoverflow.com/questions/1328025
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]