jquery datepicker has different format on different browsers

jquery datepicker has different format on different browsers - javascript

im using jQuery datepicker in my php code specifically for the browsers like IE and Firefox. The default date format of datepicker is mm/dd/yyyy, however for chrome, since the date picker is already available, it shows dd/mm/yyyy. Whatever the display format is, i only want to send back to the server 'yyyy-mm-dd' or as in php date('Y-m-d)
How can i display the date from datepicker as dd/mm/yyyy and send to database as yyy-mm-dd? In doing so, i don't want to affect Chrome which is already working properly. Thanks for any advice.

You can use the dateFormat option:
$( "#datepicker" ).datepicker(
"option", "dateFormat", "yy-mm-dd"
);

Set your datepicker format try this :-
$("#datepicker").datepicker("option", "dateFormat", 'yy-mm-dd' );
More details

You have to specify dateFormat other wise its dependent to browser.
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</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="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
</body>
</html>
Reference: jqueryui datepicker

Thanks to Rahautos. I did this:
<script type="text/javascript">
if (datefield.type!="date"){ jQuery(function($){
$('#datepicker').datepicker();
$("#datepicker").datepicker("option", "dateFormat", 'yy-mm-dd' );
})
}
</script>

Related

Dynamically set maximum date in jquery (javascript)

<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
$(function() {
$( "#datepicker" ).datepicker({
changeYear: true,
minDate: '-3M',
maxDate: '+28D',
});
});
I want to give admin power so that they can dynamically set the maximum date from the drop down. For e.g - if admin selects 3 from drop down it should automatically reflect in maxDate.

Here is your solution
I added new dropdown where admin select value it will automatically add in MaxDate
var newdate=$("#selected").val();
function getdate() {
console.log(newdate)
$("#datepicker").datepicker("destroy");
$( "#datepicker" ).datepicker({
changeYear: true,
minDate: '-3M',
maxDate: '+'+newdate+'D',
});
}
$( "#datepicker" ).datepicker("refresh");
getdate()
function change(){
newdate=$("#selected").val();
getdate()
}
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
<select id="selected" onchange="change()">
<option>3</option>
<option>4</option>
</select>
</div><!-- End demo -->

Jquery datepicker with allowed days depend on select

Hi i have Jquery datepicker with allowed to choose coming 6 days , but need to make it depended on select option for example :
if choose some select option, i want to datepicker let me choose 10 days instead of allowed 6days and e.t.c
did anyone know how to do this ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> -->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 6d"} ).val();
var date=Number($("#date").val());
$("#date").change(function(){
var date=Number($("#date").val());
$("#datepicker").datepicker("destroy");
if(date===0)
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 6d"} ).val();
else
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 15d"} ).val();
$("#datepicker" ).datepicker("refresh");
console.log(date);
});
$(function() {
$("#datepicker").datepicker().val();
});
});
</script>
</head>
<body>
<select name="da" id="date">
<option value="0">no</option>
<option value="1">yes</option>
</select>
<button id="button">button</button>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

In your maxdate function is 6d defined. Maybe change it to 10d?
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 10d"} ).val();
Will work. Also instead of making a .change, you can call a javascript function by adding an onClick to the radiobuttons and setting it in the function. Reload the datepicker afterwards because else it's still using the old configuration.
For example
<option onClick('changeto5();') value="0">no</option>
<option onClick('changeto10();') value="1">yes</option>

Date format for Input Field

I just created input date field and tried to change the format. but unable to achieve. is this possible to change the format?
Code Snippet:
<form>
<input value="i want to show 09/09/2015" /><br><br/><br/>
<input type="date" id="dt" value="2014-09-09"/>
</form>
http://jsfiddle.net/HudMe/626/
I wanna show dd/mm/yyyy format.

Use the below datepicker.
https://jqueryui.com/datepicker/
Add below line your script.
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy'
});

<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
You can change formate of dat by:
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", <SPECIFY Date Formate here>);
});
});

Assuming you want to change <input type='date'> format so there is no way possible to change the format in <input type="date">.
But you can use https://jqueryui.com/datepicker/ instead of it. see also http://api.jqueryui.com/datepicker/.
After you can change you date format like below :
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );

In Google Chrome it works fine !
For firefox
add small js
(function(){
var target = document.getElementById("dt");
var val = target.getAttribute ('value');
val = val.split("-").reverse().join('-');
target.setAttribute('value',val);
})();
to your fiddle

Custom Text in jQuery Datepicker

I have to display date in input box after picking from datepicker using jQuery.
I have used following code:
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM' });
$.datepicker.formatDate('yy-mm-dd');
});
And I am able to get date in this format: "Fri 09 August".
However my requirement is: Fri 09 August (Today)
Here's a JS Fiddle to work upon: http://jsfiddle.net/4cgPe/
Any idea how I could achieve this?

I couldn't find much about adding custom text to jQuery, so I came up with my own JavaScript.
I built upon your DatePicker code.
(What I understood was, if the selected date is of today, then add " (Today)", OR, add " (Tomorrow)" if selected date is of tomorrow OR, add nothing for other dates.
<html><head><link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM yy' });
$.datepicker.formatDate('yy-mm-dd');
});
function updateDate(){
var inputDate=document.getElementById('datepicker').value;
var selectedDate=new Date(inputDate);
var today=new Date();
var tomorrow=new Date();
tomorrow.setDate(today.getDate()+1);
selectedDate.setHours(0,0,0,0);
today.setHours(0,0,0,0);
tomorrow.setHours(0,0,0,0);
var DaysFull=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var DaysShort=["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
var MonthsFull=["January","February","March","April","May","June","July","August","September","October","November","December","January"];
var MonthsShort=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan"];
var finalDate=DaysShort[selectedDate.getDay()]+" "+selectedDate.getDate()+" "+MonthsFull[selectedDate.getMonth()];
if(selectedDate.getTime() == today.getTime()){
document.getElementById('datepicker').value=finalDate+" (Today)";
}
else if(selectedDate.getTime() == tomorrow.getTime()){document.getElementById('datepicker').value=finalDate+" (Tomorrow)";}
else {document.getElementById('datepicker').value=finalDate;}
}
</script>
</head>
<body>
<form><input type="text" id="datepicker" onchange="javascript:updateDate()" /></form>
</body></html>
EDIT:
Additional Functionality: There may be a requirement to use Full Days/Months name or Short Days/Months, so you can use the array accordingly.
DaysFull: Sunday, Monday, etc.
DaysHalf: Sun, Mon, etc.
MonthsFull: January, February, etc.
MonthsHalf: Jan, Feb, etc.
Hope this helps. Let me know if this is not enough. :)

Full Source Code as below for different types of format :
<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>
<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>
More about format refer This link

jQuery Datepicker resets date when using different date format

I have found a possible bug: datepicker resets initial date when using different date format like "mm yy" or "yy". So, if a select a date, the second time a do this the date is not saved and today's date is preselected.
Sample code:
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "mm yy" });
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
See fiddle example.
It only happens if your format does not contain a "dd" or similar for day values.
Any idea of how to avoid it?

You should keep all the necessary element of date in your date picker's format.
format: 'dd-mm-yy',

I just got this from this answer to another question; it will solve your problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
Reference from:
http://jsfiddle.net/bopperben/DBpJe/

Develop Reference

JavaScript is the programming language of the Web.

jquery datepicker has different format on different browsers - javascript

You can use the dateFormat option: $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );

Set your datepicker format try this :- $("#datepicker").datepicker("option", "dateFormat", 'yy-mm-dd' ); More details

Thanks to Rahautos. I did this: <script type="text/javascript"> if (datefield.type!="date"){ jQuery(function($){ $('#datepicker').datepicker(); $("#datepicker").datepicker("option", "dateFormat", 'yy-mm-dd' ); }) } </script>

Related

Dynamically set maximum date in jquery (javascript)

Jquery datepicker with allowed days depend on select

Date format for Input Field

Custom Text in jQuery Datepicker

jQuery Datepicker resets date when using different date format

Categories

Resources