jQuery UI DatePicker - Change Date Format
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
?
Accepted Answer
Here's one specific for your code:
var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
More general info available here:
Read more… Read less…
inside the jQuery script code just paste the code.
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
this should work.
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.
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"/>
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' );
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.