jQuery UI DatePicker - Change Date Format
JqueryJquery UiDateJquery Ui-DatepickerJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
Here's one specific for your code:
var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
More general info available here:
Solution 2 - Jquery
inside the jQuery script code just paste the code.
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
this should work.
Solution 3 - Jquery
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 - Jquery
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 - Jquery
> 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' );
Solution 6 - Jquery
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.
Solution 7 - Jquery
$("#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
Solution 8 - Jquery
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
});
</script>
Solution 9 - Jquery
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
}
});
});
Solution 10 - Jquery
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
Solution 11 - Jquery
If you need the date in yy-mm-dd format,you can use this:-
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" });
You can find all the supported format https://jqueryui.com/datepicker/#date-formats
I was in need of 06,Dec 2015,I did this:-
$("#datepicker").datepicker({ dateFormat: "d M,y" });
Solution 12 - Jquery
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>
Solution 13 - Jquery
So I struggled with this and thought I was going mad, the thing is bootstrap datepicker was being implemented not jQuery so the options are different;
$('.dateInput').datepicker({ format: 'dd/mm/yyyy'})
Solution 14 - Jquery
Just run this HTML page, You can see several formats.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30" /></p>
<p>Format options:<br />
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
</body>
</html>
Solution 15 - Jquery
This works too:
$("#datepicker").datepicker({
dateFormat:'d-m-yy'
});
Solution 16 - Jquery
<script>
$(function() {
$("#datepicker").datepicker();
$('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
});
$("#startDate").datepicker({dateFormat: 'd MM y'});
</script>
Solution 17 - Jquery
I am using jquery for datepicker.These jqueries are used for that
<script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
<script src="jqueryCalendar/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="jqueryCalendar/jqueryCalendar.css">
Then you follow this code,
<script>
jQuery(function() {
jQuery( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
Solution 18 - Jquery
This works smoothly. Try this.
Paste these links in your head section.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Following is the JS coding.
<script>
$(document).ready(function () {
$('#completionDate').datepicker({
dateFormat: 'yy-mm-dd', // enter date format you prefer (e.g. 2018-10-09)
changeMonth: true,
changeYear: true,
yearRange: "-50:+10",
clickInput: true,
onSelect: function (date) {
loadMusterChit();
}
});
});
</script>
Solution 19 - Jquery
If you setup a datepicker on an input[type="text"] element you may not get a consistently formatted date, particularly when the user doesn't follow the date format for data entry.
For example, when you set the dateFormat as dd-mm-yy and the user types 1-1-1. The datepicker will convert this to Jan 01, 2001 internally but calling val() on the datepicker object will return the string "1-1-1" -- exactly what is in the text field.
This implies you should either be validating the user input to ensure the date entered is in the format you expect or not allowing the user to enter dates freeform (preferring instead the calendar picker). Even so it is possible to force the datepicker code to give you a string formatted like you expect:
var picker = $('#datepicker');
picker.datepicker({ dateFormat: 'dd-mm-yy' });
picker.val( '1-1-1' ); // simulate user input
alert( picker.val() ); // "1-1-1"
var d = picker.datepicker( 'getDate' );
var f = picker.datepicker( 'option', 'dateFormat' );
var v = $.datepicker.formatDate( f, d );
alert( v ); // "01-01-2001"
Be aware however that while the datepicker's getDate() method will return a date, it can only do so much with user input that doesn't exactly match the date format. This means in the absence of validation it is possible to get a date back that is different from what the user expects. Caveat emptor.
Solution 20 - Jquery
My option is given below:
$(document).ready(function () {
var userLang = navigator.language || navigator.userLanguage;
var options = $.extend({},
$.datepicker.regional["ja"], {
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
highlightWeek: true
}
);
$("#japaneseCalendar").datepicker(options);
});
#ui-datepicker-div {
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>
</body>
</html>
Solution 21 - Jquery
You can add and try this way:
HTML file:
<p><input type="text" id="demoDatepicker" /></p>
JavaScript file:
$(function() {
$("#demoDatepicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
constrainInput: false
});
});
Solution 22 - Jquery
Finally got the answer for datepicker date change method:
$('#formatdate').change(function(){
$('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});
Solution 23 - Jquery
I use this:
var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');
Which returns a date of format like "20120118" for Jan 18, 2012.
Solution 24 - Jquery
Below code might help to check if form got more than 1 date field:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Display month & year menus</title>
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.8.3.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
function pickDate(DateObject){
// alert(DateObject.name)
$(function() {
$("#"+DateObject.name).datepicker({ dateFormat: "dd/mm/yy" }).val()
});
}
/*
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
*/
</script>
</head>
<body>
<p>From Date: <input type="text" name="FromDate" id="FromDate" size="9" onfocus="pickDate(this)"/></p>
<p>To Date: <input type="text" name="ToDate" id="ToDate" size="9" onfocus="pickDate(this)" /></p>
</body>
</html>
Solution 25 - Jquery
I think the correct way to do this would be something like this:
var picker = $('.date-picker');
var date = $.datepicker.formatDate(
picker.datepicker('option', 'dateFormat'),
picker.datepicker('getDate'));
This way you make sure the format string is defined only once and you use the same formatter to translate the format string into the formatted date.
Solution 26 - Jquery
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' );
}
});
Solution 27 - Jquery
you should use data-date-format="yyyy-mm-dd" in your input field html and initial data picker in JQuery just like simple
$("#issue_date").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
});
Solution 28 - Jquery
This is what worked for me:
$.fn.datepicker.defaults.format = 'yy-mm-dd'
Solution 29 - Jquery
If You want that format "dd-mm-yy" you have to change dateformat in Datepicker, this will work...
$("#date").
({
dateFormar:'dd-mm-yy',
}).val();