By Tural Ali

2011-09-10 13:33:36 8 Comments

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?


@safi eddine 2019-12-07 10:32:50

i found a way to change format ,its a tricky way, i just changed the appearance of the date input fields using just a CSS code.

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;

  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  left: 56px;

  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  left: 26px;

  position: absolute !important;
  padding: 2px;
  left: 4px;
<input type="date" value="2019-12-07">

@Hezbullah Shah 2019-09-16 08:00:47

Since the post is active 2 Months ago. so I thought to give my input as well.

In my case i recieve date from a card reader which comes in dd/mm/yyyy format.

what i do. E.g.

var d="16/09/2019" // date received from card
function filldate(){
<input type="date" id="cardexpirydate">
<br /><br />
<input type="button" value="fill the date" onclick="filldate();">

what the code do:

  1. it splits the date which i get as dd/mm/yyyy (using split()) on basis of "/" and makes an array,
  2. it then reverse the array (using reverse()) since the date input supports the reverse of what i get.
  3. then it joins (using join())the array to a string according the format required by the input field

All this is done in a single line.

i thought this will help some one so i wrote this.

@David Walschots 2012-03-01 15:59:39

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.

Desktop devices

For Chrome, Firefox, and Opera, the formatting of the input field's text is based on the browser's language setting. For Edge, it is based on the Windows language setting. Sadly, all web browsers ignore the date formatting configured in the operating system. To me this is very strange behaviour, and something to consider when using this input type. For example, Dutch users that have their operating system or browser language set to en-us will be shown 01/30/2019 instead of the format they are accustomed to: 30-01-2019.

Internet Explorer 9, 10, and 11 display a text input field with the wire format.

Mobile devices

Specifically for Chrome on Android, the formatting is based on the Android display language. I suspect that the same is true for other browsers, though I've not been able to verify this.

@Mateo 2012-07-10 20:59:43

What is interesting about this is that with the Chrome 20.0.1132.47 m build the date display text in native date inputs is localized. A year ago it was using the ISO 8601/RFC3339 standard yyyy-MM-dd and now it is MM/dd/yyyy on my box (en-US).

@David Walschots 2012-08-22 08:31:01

I've modified the answer in response to the comments provided above.

@Allan Kimmer Jensen 2012-11-22 09:53:47

I would have hoped for a JS timestamp, and not the wireformat. And a way of changing the presentation format, it is pretty hard to make consistent.

@David Walschots 2013-01-30 10:47:16

@AllanKimmerJensen though I understand your thoughts. I believe the decision to use the format specified in RFC3339 is a correct one, as it does not create a coupling between HTML and JavaScript. As for your second point, I'd feel that from a usability perspective, it would make sense for the user to see the calendar according to his regional preferences.

@Lex 2013-09-10 12:46:39

I think it's better to write ABOVE full explanation: There is no way.

@David 2014-04-09 21:02:04

"displays a date picker using the user's local calendar format" - this doesn't seem correct. At the time of writing Chrome appears to use the language setting in Chrome settings rather than the system settings.

@Michael Mior 2014-06-04 20:04:01

There is a way if you're willing to go the Javascript route. For example:

@deiga 2014-11-05 06:55:50

The problem here, is that the date separators don't seem to follow the localisation. In my region dates are separated by dots, i.e. today is 05.11.2014, but the datepicker insists on displaying 05/11/2014, which confusing to my users

@iurisilvio 2015-01-26 19:14:04

If the app is pt_BR, I expect a pt_BR input. my system settings doesn't matter. HTML5 need some way to enforce locale.

@Miguel 2015-06-22 15:06:18

worse is the localization dd/mm/yyyy with mm/dd/yyyy that one can get messy if not careful

@Miguel 2015-06-23 10:59:58

please check my solution…

@SomeRandomPerson 2015-08-20 15:12:22

I think this answer deserves the bounty

@Sam Hasler 2015-08-21 08:43:09

@SamSwift This answer predates the bounty by over three years, I'm asking if anything has changed in the meantime.

@SomeRandomPerson 2015-08-21 09:13:36

@SamHasler, through research I have done, it appears (at least in major browsers), nothing has changed and all is the same as is described by the answer. I have found some people that say the only way to do this is Create your own, however this solution is not the answer the OP is looking for, where this one is most like (and using sources) what the OP is asking

@Luke H 2015-08-31 12:59:34

I use Spanish locale for date/currency settings as I am based in Spain, yet my first language is English and I'm used to a USA keyboard layout so I use English/USA keyboard. My customers are French-speaking European.... I wish I could hint to Chrome etc. to stop displaying dates in USA mm-dd-yyyy format!

@boh 2016-06-10 08:40:12

what a useless component, who the heck come up with this specs?

@Flimm 2017-08-17 15:47:33

Does the value attribute match the format sent over the wire, or the format displayed to the user?

@Shilan 2017-10-20 11:39:14

Thanks for elaborating this, I was totally confused not knowing what has happened. But generally it's a ridiculous solution as many of my UI users are not the admin of their computer and therefore they cannot change the time format of their computer but still they want to see these dates in my GUI in a specific format. Don't know what to do!

@tatsu 2018-03-13 15:54:08

404 document not found on first link

@David Walschots 2018-03-13 16:33:16

@tatsu thank you for noticing. I've replaced the reference with one that works again :-).

@David Walschots 2018-03-13 17:03:24

@deiga great remark and sadly this is still true years later. I've updated the answer accordingly. Thank you!

@Adam 2018-11-08 21:03:58

okay so you are just saying that the format YYYY-MM-DD is submitted? Not how it is presented?

@David Walschots 2018-11-08 21:11:25

@Adam Exactly. The wire format (YYYY-MM-DD) is different from the presentation format. The wire format is always the same for all browsers. The presentation depends on the browser (some include a date picker for example).

@Legends 2019-11-09 19:03:08

@DavidWalschots ` formatting of the input field's text is based on the browser's language setting`. Do you mean Browser Display lanaguage or Page Display language (Accepted-language)? I just set the page display language, added German and kicked all others out, still showing dates in english format.

@David Walschots 2019-11-10 09:01:33

@Legends it's the language setting as found in the web browser itself. It's unrelated to any HTTP headers.

@Legends 2019-11-10 09:52:08

@DavidWalschots Yes, I know. I have tried it with firefox. It's the browser language not the page display language. I've posted a comment regarding my finding shortly after I have asked you this but somehow it didn't make it to the comments section...

@Ravinder Payal 2014-06-04 07:55:06

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 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

@shady 2018-09-21 17:32:46

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

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">&#9660;</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('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            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();
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;

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.

@SDude 2015-08-21 22:01:08

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!

@Sam Hasler 2015-08-24 13:50:17

but are any of those localizable? i.e. change the month names to non-english. And do they work on desktop and mobile?

@SDude 2015-08-24 18:27:57

Sure, they're localizable. You could take advantage of the system's locale (i.e: or provide your i18n files inside the webcomponent (i.e: As for mobile browsers, they’re supported using polyfills, although not 100% (yet)… Check the browsers/versions link I posted. Again, this is bleeding edge. If you're forward-looking, it's a great solution.

@Sam Hasler 2015-08-25 12:22:34

You got lucky. This didn't solve my problem, or add any useful information. I wouldn't have awarded the bounty to it if I'd been paying attention to SO.

@SDude 2015-08-25 14:54:11

Asking about mobile support you've shown that you didn't care to read my answer or even try to research more. I wouldn't have lost my time here if I knew that you were looking for a "gimme teh codez” answer. I'll update the answer with a working web component when I have time, but I'll do it just for the community.

@Sam Hasler 2015-08-27 08:44:49

Sorry, I hadn't seen your latest comment. This: looks quite useful and should be included in the answer.

@SDude 2015-08-27 12:33:26

Glad you find it useful. I will update the answer with everything.

@Rahul R. 2018-05-26 19:23:16

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.

Refer google developers page on same.

@ashish bhatt 2015-09-02 07:40:45

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() {
  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();
  yy = d.getFullYear();
  document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
  document.getElementById("ndt").hidden = false;
  document.getElementById("dt").hidden = true;


enter image description here

@Miguel 2015-06-22 17:32:47

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=""></script>
<script src=""></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>

@RobG 2016-05-19 00:16:15

This doesn't answer the question and requires 2 libraries, neither of which are tagged or asked for. It also does not allow manual entry of the date.

@Miguel 2016-05-19 02:30:35

it was not asked to be changed, only show can do this as a preview, and use input with change events, to update the format anyway.

@pmucha 2015-07-01 13:14:47

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:

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.

@SomeRandomPerson 2015-08-21 11:48:10

This does not work, it you change to MMMM YYYY DD, only the DD changes. -1 for this, sorry

@pmucha 2015-09-11 09:11:12

@SamSwift - have you clicked "Run" after you changed the value? ;)

@patrick 2016-04-26 10:00:02

@SamSwift웃 is right though... I changed the format to "DD-YYYY-MM" and got "DD-MMMM-00YY" as a result...

@pmucha 2016-06-08 10:05:26

No he's not. You don't understand how it works: You play with JS and you should with HTML. You have changed the input format of the 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.

@Nic Nilov 2016-09-29 15:07:28

Nice example but it doesn't quite work on iOS (10.0). While the functionality is there, the styling is off.

@Dileepa 2017-04-02 13:43:05

Thanks. Implemented value="2000-10-01" data-date="2000-10-01" onchange="var d = new Date(this.value);this.setAttribute('data-date',d.getFullYear‌​()+'-'+(d.getMonth()‌​+1)+'-'+d.getDate())‌​"

@Daniel Santos 2018-02-01 00:41:04

Doesn't work neither in Safari nor Edge

@MaxZoom 2018-04-26 17:13:00

Doesn't work neither in Safari, Edge, Opera - which make it unusable

@Alexander Lallier 2018-10-03 15:53:54

Broken in Firefox

@Miguel 2018-11-13 11:26:21

Good if modern browsers like chrome, that supported the CSS content atrr sintax

@Maxim Georgievskiy 2019-09-27 09:51:07

Thanks for pointing the ability to display attribute content in before/after pseudo-elements. I've learned something new today:)

@ton 2015-06-01 13:28:37

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


LANG=pt_BR /opt/google/chrome/chrome

The date is showed as dd/mm/yyyy

You can use (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: and

You can see you real current date format using date:

$ date +%x

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.

@lepe 2015-08-17 01:10:40

+1 Great! using: LANG=ja_JP.UTF-8 chromium-browser did the trick for me. It also work with Vivaldi and I guess in other browsers too. Thanks!

@northamerican 2014-08-15 01:27:28

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.


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]);


$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}";

@Sebas 2015-05-14 16:52:05

To the top you go. For people reading this, this guy just didn't expand enough his answer. This is css based and does work with vanilla javascript.

@Miguel 2015-06-22 15:08:17

crossbrowser like IE?

@Miguel 2015-06-22 15:11:33

Easier to create a span on top of the date? and then just customize that "label" and make sure event-pointer is disabled to allow click. but the text of the input transparent.. and there you go, full crossBrowser.. you can even do it " 22, Jun, 2015" . If you want to keep that native Picker to pop up, in mobiles..?

@Sam Hasler 2015-08-14 13:38:06

This doesn't work if any of the parts have no value in them, and if you hit delete at any point it blanks the entire input, rather than the individual field (which is how chrome's native widget behaves)

@northamerican 2015-08-14 19:48:38

@ I guess the best way around that would be to set the day / month to 01 or year to 2000 if clear is pressed. Again, this is a proof of concept, borderline code golf and I imagine web components and such will be a more practical solution to getting around this.

@John 2012-07-09 18:11:58

It's important to distinguish two different formats:

  • The RFC 3339/ISO 8601 "wire format": YYYY-MM-DD. According to the HTML5 specification, this is the format that must be used for the input's value upon form submission or when requested via the DOM API. It is locale and region independent.
  • The format displayed by the user interface control and accepted as user input. Browser vendors are encouraged to follow the user's preferences selection. For example, on Mac OS with the region "United States" selected in the Language & Text preferences pane, Chrome 20 uses the format "m/d/yy".

The HTML5 specification does not include any means of overriding or manually specifying either format.

@Flimm 2017-08-17 15:46:40

Does the value attribute match the wire format, or what is displayed to the user?

@David Walschots 2018-03-02 20:52:54

@Flimm the value attribute always matches the wire format.

@Turamarth 2012-06-16 15:30:24

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.

@David Walschots 2012-08-22 08:49:18

The DD-MM-YYYY format you mention is probably your local calendar format. It is not wise (and as far as I can see, impossible within the current HTML5 standards) to force a specific format on visitors of a website, because they might be used to a calendar format different from the one you force upon them.

@Tilt 2014-06-27 15:31:34

You are referring to the presentation format, because if you try to read the input.val(), google chrome (v35) returns the date in format yyyy-mm-dd, whatever the presentation format is ;)

@user275801 2018-09-24 09:35:56

@DavidWalschots if only the americans would realize how unwise it is to force the retarded m-d-y format on the rest of the world.

@David Walschots 2018-09-24 17:27:57

@user275801 While I agree that M-D-Y is an odd format. I've not seen Americans forcing it onto others. :-)

@user275801 2018-10-08 02:01:21

@DavidWalschots most software and operating systems I've seen requires you to "opt-out" of the american m-d-y format. In that sense, it is in fact "forced". In fact my linux has all the regional settings for Australia, but my browser (an american browser, if it can be called that) still takes it upon itself to display all dates in m-d-y format, and in this case I'm unable to "opt-out".

@Michael Mior 2011-09-10 13:39:44

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.

@Govindarao Kondala 2011-10-11 04:14:55

local date format means our phone default date format or location date formate?

@Michael Mior 2011-10-11 13:00:59

Depends on what mobile browser you're using. But I suspect it will be the phone's default.

@RobG 2016-05-19 00:06:54

"Local" format means based on geographic location, which is possibly the worst way to determine a date format. Would an American travelling to Europe expect their smart phone to start showing time in 24hr format and dates as yyyy-mm-dd or dd/mm/yyyy? Or vice versa for a European in the US?

Related Questions

Sponsored Content

9 Answered Questions

[SOLVED] Date format Mapping to JSON Jackson

31 Answered Questions

[SOLVED] How to set input type date's default value to today?

  • 2011-08-08 13:14:13
  • Ian Brown
  • 715114 View
  • 372 Score
  • 31 Answer
  • Tags:   html date input

54 Answered Questions

[SOLVED] How to format a JavaScript date

19 Answered Questions

[SOLVED] Storing Objects in HTML5 localStorage

7 Answered Questions

[SOLVED] Is there a float input type in HTML5?

18 Answered Questions

[SOLVED] How to check whether an object is a date?

  • 2009-03-13 17:31:06
  • Martin
  • 391567 View
  • 534 Score
  • 18 Answer
  • Tags:   javascript date

11 Answered Questions

[SOLVED] Disable validation of HTML5 form elements

8 Answered Questions

[SOLVED] What is this date format? 2011-08-12T20:17:46.384Z

13 Answered Questions

[SOLVED] YYYY-MM-DD format date in shell script

Sponsored Content