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?
This question is related to
jquery
jquery-ui
date
jquery-ui-datepicker
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
});
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
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.
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>
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>
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' );
}
});
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
});
});
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' );
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>
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>
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"/>
My option is given below:
$(document).ready(function () {_x000D_
var userLang = navigator.language || navigator.userLanguage;_x000D_
_x000D_
var options = $.extend({},_x000D_
$.datepicker.regional["ja"], {_x000D_
dateFormat: "yy/mm/dd",_x000D_
changeMonth: true,_x000D_
changeYear: true,_x000D_
highlightWeek: true_x000D_
}_x000D_
);_x000D_
_x000D_
$("#japaneseCalendar").datepicker(options);_x000D_
});#ui-datepicker-div {_x000D_
font-size: 14px;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<link rel="stylesheet" type="text/css"_x000D_
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">_x000D_
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<h3>Japanese JQuery UI Datepicker</h3>_x000D_
<input type="text" id="japaneseCalendar"/>_x000D_
_x000D_
</body>_x000D_
</html>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" });
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.
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>
This works too:
$("#datepicker").datepicker({
dateFormat:'d-m-yy'
});
$("#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
So I struggled with this and thought I was going mad, the thing is bootstrap datepicker was being implemented not jQuery so teh options were different;
$('.dateInput').datepicker({ format: 'dd/mm/yyyy'})
I use this:
var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');
Which returns a date of format like "20120118" for Jan 18, 2012.
This is what worked for me:
$.fn.datepicker.defaults.format = 'yy-mm-dd'
<script>
$(function() {
$("#datepicker").datepicker();
$('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
});
$("#startDate").datepicker({dateFormat: 'd MM y'});
</script>
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
});
</script>
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.
Finally got the answer for datepicker date change method:
$('#formatdate').change(function(){
$('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});
inside the jQuery script code just paste the code.
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
this should work.
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
}
});
});
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.
Source: Stackoverflow.com