Skip to content
Fix Code Error

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

March 13, 2021 by Code Error
Posted By: Anonymous

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

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.

Answered By: Anonymous

Related Articles

  • How to smoothly hide part of an element
  • Is CSS Turing complete?
  • How to update Vue component property when Vuex store…
  • Form field border-radius is not working only on the…
  • What's the difference between ISO 8601 and RFC 3339…
  • Centering in CSS Grid
  • getting text input from a form in react.js using Refs
  • How can I pass a wct test while rearranging children…
  • Why my "title" bloc doesn't go to bottom?
  • How to set HTML5 required attribute in Javascript?
  • How do you parse and process HTML/XML in PHP?
  • Is there any difference between a GUID and a UUID?
  • Use of Jquery on scroll event
  • useEffect Error: Minified React error #321 (GTM…
  • Fix top buttons on scroll of list below
  • Show/hide 'div' using JavaScript
  • What does do?
  • How to validate an email address using a regular expression?
  • react-table has a issue with rendering in next.js
  • What are the currently supported CSS selectors…
  • HTML5 best practices; section/header/aside/article elements
  • In CSS Flexbox, why are there no "justify-items" and…
  • How can I wrap all BeautifulSoup existing…
  • Playing HTML5 video on fullscreen in android webview
  • "Thinking in AngularJS" if I have a jQuery background?
  • UITableView with fixed section headers
  • python 3.2 UnicodeEncodeError: 'charmap' codec can't…
  • How do SO_REUSEADDR and SO_REUSEPORT differ?
  • Best way to communicate between instances of the…
  • What are Long-Polling, Websockets, Server-Sent…
  • Footer not staying at the bottom when scrolling
  • Polymer Dom-Repeat Binding to Content
  • How to solve Internal Server Error in Next.Js?
  • nesting elements and dynamic content inside…
  • What are allowed characters in cookies?
  • What are the nuances of scope prototypal /…
  • What are MVP and MVC and what is the difference?
  • How should a model be structured in MVC?
  • Should ol/ul be inside or outside?
  • 400 vs 422 response to POST of data
  • Smart way to truncate long strings
  • setTimeout function not working : javascript
  • For-each over an array in JavaScript
  • Why use deflate instead of gzip for text files…
  • urlencode vs rawurlencode?
  • How to use Servlets and Ajax?
  • The definitive guide to form-based website authentication
  • Use of PUT vs PATCH methods in REST API real life scenarios
  • What does the CSS rule "clear: both" do?
  • SPA best practices for authentication and session management
  • Best approach to real time http streaming to HTML5…
  • How can I access and process nested objects, arrays or JSON?
  • How do you sign a Certificate Signing Request with…
  • JavaScript gives NaN error on the page but variable…
  • How to render web component in Polymer
  • Ember link-to throws error / does not clear screen…
  • Start redis-server with config file
  • What's different between Virtual DOM and Shadow DOM?
  • LDAP root query syntax to search more than one specific OU
  • Uses of content-disposition in an HTTP response header
  • What does AngularJS do better than jQuery?
  • Identifying and solving…
  • What are the undocumented features and limitations…
  • Polymer 1.0: Clickable item in dom-repeat to e.g.…
  • What is the difference between properties and…
  • Create a new file in git bash
  • How can I find the product GUID of an installed MSI setup?
  • How does PHP 'foreach' actually work?
  • What is the difference between Spring, Struts,…
  • What does this symbol mean in JavaScript?
  • wp.data.select('meta') property undefined with…
  • How do servlets work? Instantiation, sessions,…
  • How to change the color of paper-scroll-header-panel?
  • How can I get the index from a JSON object with value?
  • Verilog: How to instantiate a module
  • Getting the closest string match
  • How do I rotate text in css?
  • How do I measure execution time of a command on the…
  • How can I manually compile a svelte component down…
  • Text size and different android screen sizes
  • What's the best way of scraping data from a website?
  • How to get child element from template element?
  • Polymer focus() has to be wrapped in setTimeout() to work?
  • XMLHttpRequest cannot load ✘✘✘ No…
  • Java string to date conversion
  • load and execute order of scripts
  • Why does C++ code for testing the Collatz conjecture…
  • What is the maximum length of a valid email address?
  • Active tab issue on page load HTML
  • Am I paranoid? "Brutally" big Polymer website after…
  • What is the meaning of polyfills in HTML5?
  • What is an optional value in Swift?
  • Polymer 1.0 'array-style' path accessors,…
  • Iterator invalidation rules
  • data.table vs dplyr: can one do something well the…
  • Angular.js and HTML5 date input value -- how to get…
  • commandButton/commandLink/ajax action/listener…
  • jQuery Mobile: document ready vs. page events
  • Understanding PrimeFaces process/update and JSF…
  • Fundamental difference between Hashing and…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Parse (split) a string in C++ using string delimiter (standard C++)

Next Post:

Extract file name from path, no matter what the os/path format

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error