Is there any way to change input type="date" format?

Question

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?

Solution 1

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 RFC 3339 specification, which specifies a full-date format equal to: yyyy-mm-dd. See section 5.6 of the RFC 3339 specification for more details.

This format is used by the value HTML attribute and DOM property and is the one used when doing an ordinary form submission.

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.

Solution 2

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!

Solution 3

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/

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")

input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

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.

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[Govindarao Kondala]

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

[Michael Mior]

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

[David Walschots]

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.

[Allan Kimmer Jensen]

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]

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

[Michael Mior]

There is a way if you're willing to go the Javascript route. For example: github.com/chemerisuk/better-dateinput-polyfill.git

[Tilt]

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

[iurisilvio]

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.

[lepe]

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

[Can O' Spam]

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

[Smilediver]

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

[sdude]

Sure, they're localizable. You could take advantage of the system's locale (i.e: is.gd/QSkwAY) or provide your i18n files inside the webcomponent (i.e: is.gd/Ru9U82). 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.

[Smilediver]

Sorry, I hadn't seen your latest comment. This: jcrowther.io/2015/05/11/i18n-and-web-components looks quite useful and should be included in the answer.

[sdude]

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

[Luke H]

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!

[pmucha]

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

[patrick]

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

[RobG]

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

[RobG]

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]

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

[pmucha]

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.

[boh]

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

[Nic Nilov]

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

[Flimm]

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

[David Walschots]

@Flimm the value attribute always matches the wire format.

[MaxZoom]

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

[user275801]

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

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

[Alexander Lallier]

Broken in Firefox

[user275801]

@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".

[Miguel]

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

[Maxim Georgievskiy]

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

[Legends]

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

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

[Mark Amery]

@SDude Looks like the links you indicated you thought worth including are still not included.

[Mark Amery]

Although over 100 people apparently disagree, this answer doesn't seem to me like it adds anything useful. There's no rationale given for why web components (rather than any other way of creating a reusable widget for a webpage) should be solution of choice here, and at least the first component proposed is a bit rubbish (no calendar popup, some crazy behaviours if I typo a too-large number for e.g. the day). Also, at no point do you actually show how to set a custom date format with any of your suggested components, meaning that ultimately this doesn't answer the question that was asked.

[Mark Amery]

This doesn't address the question asked; you're parsing a custom format here, not changing the format that the <input> uses to show the value.

[Taufik Nur Rahmanda]

In Angular, we can use this npmjs.com/package/ng2-date-picker. It's indistinguishable with normal date input and very customizable.

[David Walschots]

@TaufikNurRahmanda I'm guessing that when pressing the input field you won't see the native Android or iOS controls for dates? The component seems to require manually configuring the presentation format. For i18n, it's really important to do it based on the user's locale. I'm not sure why you'd want to use this component from that perspective, as it's just more manual work and doesn't show as the native browser control.

[Maris Mols]

For me this does not work. My Windows settings have format d.m.Y, but browser displays m/d/Y.

[Rahul R.]

which browser it is, and what is the version?

[Maris Mols]

Im using Chrome

[Rahul R.]

This shouldn't be the case as per documentation, Just check the version and make sure its latest, if its latest, you can open a bug against chrome

[Karel Bílek]

the "custom HTML5 element" link does not work

[Sjeiti]

HTMLFormElements don't allow :before and :after pseudo selectors.

[Sri]

your need clear browser cache or use incognito window.

[yohosuff]

Opening it in a new tab should pick up the new settings too.

[andreszs]

The W3C adds a new control once per decade, but they fail to consider different display locales... I'd really like to work there to get paid for doing nothing!!

[andreszs]

Display format now can be set to match the OS' locale in Firefox from the Settings panel, check my answer for details. Chrome should (or could) have this option added by now.

[Patrick Szalapski]

Yes, it matches the OS setting, which is frustrating because I want it to match the Accept-Language setting like all other localization! See also stackoverflow.com/questions/69555359

[David Walschots]

I've been unable to find this setting in Firefox v93.0. Is this for the regular Firefox, or is this perhaps part of the Developer Edition?

[andreszs]

I have the regular Firefox 93.0, the option is at the Language section. Maye it will be hidden whenever the browser language matches the Windows region and language settings? I have english Windows and Firefox but the Windows locale is set to Spanish (Argentina).

[David Walschots]

Seems somewhat of a strange (buggy?) settings feature. I have browser and Windows on English (UK) and my regional setting on Dutch. No option to pick Dutch formatting. If I change my browser to Dutch, then I get the setting to sync with Dutch formatting (while then it doesn't matter as the format is already correct). If I change it to Spanish, then the setting is removed again.

[Aung Aung]

Thanks help me to change format using html 5 date

[Avatar]

Note: Change it directly in Chrome, not in Windows date settings.

[monsto]

@MarkAmery The "rationale" is that the op asked about HTML input elements, and that web components provide a useful web solution to the presented problem. It also says right there, last line in the op... "formatting". This response specifically and exactly answers the formatting question with a web component example. It answers the literal and spirit of the question while not pretending to be a one-stop answer to fill every input and display need. More to the point: web components are a we way to create a web solution to fit web needs. Web question, web answer.