Html 有没有办法改变输入类型=“日期”格式？

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

提问by Tural Ali

I'm working with HTML5 elements on my webpage. By default input type="date"shows date as YYYY-MM-DD.

我正在我的网页上使用 HTML5 元素。默认情况下，输入将type="date"日期显示为YYYY-MM-DD。

The question is, is it possible to change its format to something like: DD-MM-YYYY?

现在的问题是，是否有可能它的格式更改为类似：DD-MM-YYYY？

采纳答案by David Walschots

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

所述HTML5日期输入规范是指RFC 3339规范，它指定一个全日期格式等于：yyyy-mm-dd。有关更多详细信息，请参阅RFC 3339 规范的第 5.6 节。

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

这种格式由valueHTML 属性和 DOM 属性使用，是在进行普通表单提交时使用的格式。

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.

浏览器在如何呈现日期输入方面不受限制。在撰写本文时，Chrome、Edge、Firefox 和 Opera 具有日期支持（请参阅此处）。它们都显示一个日期选择器并格式化输入字段中的文本。

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-uswill be shown 01/30/2019instead of the format they are accustomed to: 30-01-2019.

对于 Chrome、Firefox 和 Opera，输入字段文本的格式基于浏览器的语言设置。对于 Edge，它基于 Windows 语言设置。遗憾的是，所有网络浏览器都忽略了操作系统中配置的日期格式。对我来说，这是非常奇怪的行为，并且在使用这种输入类型时需要考虑。例如，en-us将显示其操作系统或浏览器语言设置为的荷兰用户，01/30/2019而不是他们习惯的格式：30-01-2019。

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

Internet Explorer 9、10 和 11 以有线格式显示文本输入字段。

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.

专门针对 Android 上的 Chrome，格式基于 Android 显示语言。我怀疑其他浏览器也是如此，尽管我无法验证这一点。

回答by joseldn

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 elementdesigned to suit your needs. If you wish to override/change the workings of any html tag just build yours playing with the shadow dom.

自从问了这个问题，web 领域发生了很多事情，其中​​最令人兴奋的就是web components的落地。现在，您可以使用专为满足您的需求而设计的自定义 HTML5 元素优雅地解决此问题。如果您希望覆盖/更改任何 html 标签的工作方式，只需使用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 checkwhat people are building and get ideas from there.

好消息是已经有很多样板可用，因此很可能您不需要从头开始提出解决方案。只需检查人们正在构建的内容并从中获取想法即可。

You can start with a simple (and working) solution like datetime-inputfor polymer that allows you to use a tag like this one:

您可以从一个简单（且有效）的解决方案开始，例如用于聚合物的datetime-input，它允许您使用这样的标签：

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

或者，您可以根据需要获得具有创意和弹出式完整日期选择器的样式，以及您想要的格式和区域设置、回调和一长串选项（您有一个完整的自定义 API 供您使用！）

Standards-compliant, no hacks.

符合标准，没有黑客。

Double-check the available polyfills, what browsers/versionsthey support, and if it covers enough % of your user base… It's 2018, so chances are it'll surely cover most of your users.

仔细检查可用的 polyfills，它们支持的浏览器/版本，以及它是否覆盖了足够多的用户群……现在是 2018 年，所以它肯定会覆盖你的大多数用户。

Hope it helps!

希望能帮助到你！

回答by pmucha

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:

如前所述，正式无法更改格式。但是，可以对字段进行样式设置，因此（借助一点 JS 帮助）它以我们想要的格式显示日期。操作日期输入的一些可能性以这种方式丢失了，但是如果强制格式的愿望更大，这种解决方案可能是一种方式。日期字段保持不变：

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

剩下的就是一些 CSS 和 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.

它在桌面版 Chrome 和 iOS 上的 Safari 上运行良好（特别理想，因为触摸屏上的本机日期操纵器是无与伦比的恕我直言）。没有检查其他人，但不要指望在任何 Webkit 上失败。

回答by John

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

• RFC 3339/ISO 8601“有线格式”：YYYY-MM-DD。根据 HTML5 规范，这是在表单提交或通过 DOM API 请求时必须用于输入值的格式。它是语言环境和区域独立的。
• 由用户界面控件显示并接受为用户输入的格式。鼓励浏览器供应商遵循用户的偏好选择。例如，在“语言和文本”首选项窗格中选择“美国”区域的 Mac OS 上，Chrome 20 使用“m/d/yy”格式。

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

HTML5 规范不包括任何覆盖或手动指定任一格式的方法。

回答by Michael Mior

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.

我相信浏览器会使用本地日期格式。不要认为改变是可能的。您当然可以使用自定义日期选择器。

回答by Turamarth

Google Chrome in its last beta version finally uses the input type=date, and the format is DD-MM-YYYY.

谷歌浏览器在其最后一个测试版中终于使用了输入type=date，格式是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.

所以必须有一种方法来强制特定格式。我正在开发一个 HTML5 网页，现在日期搜索因不同的格式而失败。

回答by Miguel

Trythis if you need a quick solutionTo make yyyy-mm-dd go "dd- Sep -2016"

如果您需要快速解决方案，请尝试此操作使 yyyy-mm-dd 变为 "dd- Sep -2016"

1) Create near your input one span class (act as label)

1）在您的输入附近创建一个跨度类（充当标签）

2) Update the label everytime your date is changed by user, or when need to load from data.

2) 每次用户更改日期或需要从数据加载时更新标签。

Works for webkit browser mobilesand pointer-events for IE11+ requires jQuery and Jquery Date

适用于 webkit 浏览器移动设备和 IE11+ 的指针事件需要 jQuery 和 Jquery 日期

$("#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>

回答by ashish bhatt

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.

在阅读了大量讨论后，我准备了一个简单的解决方案，但我不想使用大量的 Jquery 和 CSS，只是一些 javascript。

HTML Code:

HTML代码：

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

CSS 代码：

#dt {
  text-indent: -500px;
  height: 25px;
  width: 200px;
}

Javascript Code :

Javascript代码：

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:

输出：

回答by ton

As said, the <input type=date ... >is not fully implemented in most browsers, so let's talk about webkit like browsers (chrome).

如前所述，<input type=date ... >大多数浏览器都没有完全实现，所以让我们谈谈 webkit 之类的浏览器 (chrome)。

Using linux, you can change it by changing the environment variable LANG, LC_TIMEdon't seems to work(for me at least).

使用 linux，您可以通过更改环境变量来更改它LANG， LC_TIME但似乎不起作用（至少对我而言）。

You can type localein a terminal to see your current values. I think the same concept can be applied to IOS.

您可以locale在终端中输入以查看当前值。我认为同样的概念可以应用于 IOS。

eg: Using:

例如：使用：

LANG=en_US.UTF-8 /opt/google/chrome/chrome

The date is showed as mm/dd/yyyy

日期显示为 mm/dd/yyyy

Using:

使用：

LANG=pt_BR /opt/google/chrome/chrome

The date is showed as dd/mm/yyyy

日期显示为 dd/mm/yyyy

You can use http://lh.2xlibre.net/locale/pt_BR/(change pt_BRby your locale) to create you own custom locale and format your dates as you want.

您可以使用http://lh.2xlibre.net/locale/pt_BR/（pt_BR根据您的区域设置更改）来创建您自己的自定义区域设置并根据需要设置日期格式。

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

关于更改默认系统日期怎么是一个很好的更高级的参考： https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/和 https：//开头askubuntu。 com/questions/21316/how-can-i-customize-a-system-locale

You can see you real current date format using date:

您可以使用以下命令查看真实的当前日期格式date：

$ date +%x
01-06-2015

But as LC_TIMEand d_fmtseems to be rejected by chrome ( and I think it's a bug in webkit or chrome ), sadly it don't work. :'(

但是由于LC_TIME并且d_fmt似乎被 chrome 拒绝（我认为这是 webkit 或 chrome 中的一个错误），遗憾的是它不起作用。:'(

So, unfortunately the response, is IF LANGenvironment variable do not solve your problem, there is no way yet.

因此，不幸的是，响应是 IFLANG环境变量不能解决您的问题，目前还没有办法。

回答by Ravinder Payal

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

无法更改 web-kit 浏览器使用用户计算机或手机的默认日期格式。但是，如果您可以使用 jquery 和 jquery UI，则有一个可设计的日期选择器，可以根据开发人员的需要以任何格式显示。jquery UI 日期选择器的链接在此页面http://jqueryui.com/datepicker/您可以找到演示以及代码和文档或文档链接

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

编辑：-我发现 chrome 使用默认等于系统设置的语言设置，但用户可以更改它们，但开发人员不能强迫用户这样做，因此您必须使用其他 js 解决方案，例如我告诉您可以搜索网络使用诸如 javascript 日期选择器或 jquery 日期选择器之类的查询