Is there any way to change input type="date" format?
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 answer 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 date-util for polymer that allows you to use a tag like this one:
<date-util format="dd/MM/yyyy"></date-util>
and adapt it as an input field... 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.
There's only a catch, although we're almost there, this is still a forward-looking'ish solution: IE 10 and old pals won't support the custom tag, so double-check the available polyfills, what browsers/versions they support, and if it covers enough % of your user base… In a few months it'll surely cover most of your users, since all major browser vendors are on board and enthusiastic about the spec, and a 360 implementation is really near.
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.
链接地址: http://www.djcxy.com/p/18652.html下一篇: 有没有办法改变输入类型=“日期”格式？