I'm working with HTML5 elements on my webpage. By default input type="date"
shows date as YYYY-MM-DD
.
The question is, is it possible to change its format to something like: DD-MM-YYYY
?
I'm working with HTML5 elements on my webpage. By default input type="date"
shows date as YYYY-MM-DD
.
The question is, is it possible to change its format to something like: DD-MM-YYYY
?
It is impossible to change the format
We have to differentiate between the over the wire format and the browser's presentation format.
Wire format The HTML5 date input specification refers to the RFC3339 specification, which specifies a full-date format equal to: yyyy-mm-dd. See section 5.6 of the RFC3339 specification for more details.
Presentation format Browsers are unrestricted in how they present a date input. At the time of writing Chrome, Edge, Firefox and Opera have date support (see here). They all display a date picker and format the text in the input field.
The formatting of the input field's text is only done correctly within Chrome. Edge, Firefox and Opera display the date with the day, month and year in the right order for the locale, but inconsistently use slashes (30/01/2018
) where for example dashes (30-01-2018
) are expected by the locale's calendar format.
Internet Explorer 9, 10 and 11 display a text input field with the wire format.
Since this question was asked quite a few things have happened in the web realm, and one of the most exciting is the landing of web components. Now you can solve this issue elegantly with a custom HTML5 element designed to suit your needs. If you wish to override/change the workings of any html tag just build yours playing with the shadow dom.
The good news is that there’s already a lot of boilerplate available so most likely you won’t need to come up with a solution from scratch. Just check what people are building and get ideas from there.
You can start with a simple (and working) solution like datetime-input for polymer that allows you to use a tag like this one:
<date-input date="{{date}}" timezone="[[timezone]]"></date-input>
or you can get creative and pop-up complete date-pickers styled as you wish, with the formatting and locales you desire, callbacks, and your long list of options (you’ve got a whole custom API at your disposal!)
Standards-compliant, no hacks.
Double-check the available polyfills, what browsers/versions they support, and if it covers enough % of your user base… It's 2018, so chances are it'll surely cover most of your users.
Hope it helps!
As previously mentioned it is officially not possible to change the format. However it is possible to style the field, so (with a little JS help) it displays the date in a format we desire. Some of the possibilities to manipulate the date input is lost this way, but if the desire to force the format is greater, this solution might be a way. A date fields stays only like that:
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">
The rest is a bit of CSS and JS: http://jsfiddle.net/g7mvaosL/
It works nicely on Chrome for desktop, and Safari on iOS (especially desirable, since native date manipulators on touch screens are unbeatable IMHO). Didn't check for others, but don't expect to fail on any Webkit.
MMMM YYYY DD
, only the DD
changes. -1 for this, sorry
– Sam Swift 웃
Aug 21 '15 at 11:48
moment
function and it is not the way to go. You should have changed data-date-format="DD-YYYY-MM"
and then you would get 09-2015-08 which is the right result.
– pmucha
Jun 8 '16 at 10:05
It's important to distinguish two different formats:
The HTML5 specification does not include any means of overriding or manually specifying either format.
value
attribute match the wire format, or what is displayed to the user?
– Flimm
Aug 17 '17 at 15:46
I believe the browser will use the local date format. Don't think it's possible to change. You could of course use a custom date picker.
Google Chrome in its last beta version finally uses the input type=date
, and the format is DD-MM-YYYY
.
So there must be a way to force a specific format. I'm developing a HTML5 web page and the date searches now fail with different formats.
M-D-Y
is an odd format. I've not seen Americans forcing it onto others. :-)
– David Walschots
Sep 24 '18 at 17:27
After many hurdles, I came up with a solution that allows changing the format. There are a few caveats but it is usable if you wish to have 'Jan' or '01' displayed consistently. It works in Chrome on Windows and Mac only due to the fact that Firefox does not yet support native date pickers at all.
https://github.com/northamerican/custom-input-date-format
JS:
function updateDateInputs() {
$('input').each(function() {
var $date = $(this),
date = $date.val().split('-'),
format = ['year', 'month', 'day'];
$.each(format, function(i, v) {
$date.attr('data-' + v, +date[i]);
});
});
}
SASS:
$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
$i: index($months, $month);
input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after {
content: "#{$month}";
}
}
Try this if you need a quick solution To make yyyy-mm-dd go "dd- Sep -2016"
1) Create near your input one span class (act as label)
2) Update the label everytime your date is changed by user, or when need to load from data.
Works for webkit browser mobiles and pointer-events for IE11+ requires jQuery and Jquery Date
$("#date_input").on("change", function () {
$(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
});
#date_input{text-indent: -500px;height:25px; width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>
After having read lots of discussions, I have prepared a simple solution but I don't want to use lots of Jquery and CSS, just some javascript.
HTML Code:
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt" onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
CSS Code:
#dt {
text-indent: -500px;
height: 25px;
width: 200px;
}
Javascript Code :
function mydate() {
//alert("");
document.getElementById("dt").hidden = false;
document.getElementById("ndt").hidden = true;
}
function mydate1() {
d = new Date(document.getElementById("dt").value);
dt = d.getDate();
mn = d.getMonth();
mn++;
yy = d.getFullYear();
document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
document.getElementById("ndt").hidden = false;
document.getElementById("dt").hidden = true;
}
Output:
As said, the <input type=date ... >
is not fully implemented in most browsers, so let's talk about webkit like browsers (chrome).
Using linux, you can change it by changing the environment variable LANG
, LC_TIME
don't seems to work(for me at least).
You can type locale
in a terminal to see your current values. I think the same concept can be applied to IOS.
eg: Using:
LANG=en_US.UTF-8 /opt/google/chrome/chrome
The date is showed as mm/dd/yyyy
Using:
LANG=pt_BR /opt/google/chrome/chrome
The date is showed as dd/mm/yyyy
You can use http://lh.2xlibre.net/locale/pt_BR/ (change pt_BR
by your locale) to create you own custom locale and format your dates as you want.
A nice more advanced reference on how change default system date is: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ and https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale
You can see you real current date format using date
:
$ date +%x
01-06-2015
But as LC_TIME
and d_fmt
seems to be rejected by chrome ( and I think it's a bug in webkit or chrome ), sadly it don't work. :'(
So, unfortunately the response, is IF LANG
environment variable do not solve your problem, there is no way yet.
It's not possible to change web-kit browsers use user's computer or mobiles default date format. But if you can use jquery and jquery UI there is a date-picker which is designable and can be shown in any format as the developer wants. the link to the jquery UI date-picker is on this page http://jqueryui.com/datepicker/ you can find demo as well as code and documentation or documentation link
Edit:-I find that chrome uses language settings that are by default equal to system settings but the user can change them but developer can't force users to do so so you have to use other js solutions like I tell you can search the web with queries like javascript date-pickers or jquery date-picker
Browsers obtain the date-input format from user's system date format.
(Tested in supported browsers, Chrome, Edge.)
As there is no standard defined by specs as of now to change the style of date control, its not possible to implement the same in browsers.
However, This behavior of obtaining the date format from system settings is better and I strongly suggest, we should not try to override it. The reason is, the users will see the date-input's format same as they have configured in the system/device and which they are comfortable with or matches with their locale.
Remember, this is just the UI format on the screen which users see, in your javascript/backend you can always keep your desired format.
I know it's an old post but it come as first suggestion in google search, short answer no, recommended answer user a custom date piker , the correct answer that i use is using a text box to simulate the date input and do any format you want, here is the code
<html>
<body>
date :
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
<input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">▼</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
window.onload =function(){
var input = document.createElement('input');
input.setAttribute('type','date');
input.setAttribute('value', 'some text');
if(input.value === "some text"){
allDates = document.getElementsByClassName("xDateContainer");
matchEnterdDate=1;
for (var i = 0; i < allDates.length; i++) {
allDates[i].style.opacity = "1";
}
}
}
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
var date = new Date(xObj.value);
var month = date.getMonth();
var day = date.getDate();
var year = date.getFullYear();
if(month!='NaN'){
document.getElementById(xTraget).value=day+" / "+month+" / "+year;
}else{
if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
}
}
</script>
</body>
</html>
1- please note that this method only work for browser that support date type.
2- the first function in JS code is for browser that don't support date type and set the look to a normal text input.
3- if you will use this code for multiple date inputs in your page please change the ID "xTime" of the text input in both function call and the input itself to something else and of course use the name of the input you want for the form submit.
4-on the second function you can use any format you want instead of day+" / "+month+" / "+year for example year+" / "+month+" / "+day and in the text input use a placeholder or value as yyyy / mm / dd for the user when the page load.
function dmy() {
var mydate = document.getElementById('dat').value;
//alert(mydate);
var yf = mydate.split("-")[0];
var mf = mydate.split("-")[1];
var df = mydate.split("-")[2];
var b = localStorage.getItem("b");
if (!b) {
b = [];
} else {
b = JSON.parse(b);
}
b.push({
df: df,
mf: mf,
yf: yf
});
localStorage.setItem("b", JSON.stringify(b));
}
function showdate() {
var sdate = JSON.parse(localStorage.getItem('b'));
var a = '';
if (sdate != null) {
for (var i = 0; i < sdate.length; i++) {
a += sdate[i]['df'] + '/' + sdate[i]['mf'] + '/' + sdate[i]['yf'] + '<br>';
}
} else {
a = 'No DATA';
}
document.getElementById('conversion').innerHTML = a;
}
<form onsubmit=dmy()>
<input type="date" name="dat" id="dat">
<input type="submit" value="submit">
</form>
<input type="button" value="convert" onclick=showdate()>
<div id="conversion"></div>
The format of the HTML5 date picker depends on the format of the server machine date time Format.
So you can change it by changing the format on you deployment server in Task bar..
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?