Html 有没有办法在 HTML5 中本地化 input type="date"

Is there a way to localize input type="date" in HTML5

提问by lambacck

I know that at the time of this writing only Opera supports a browser UI for

我知道在撰写本文时，只有 Opera 支持浏览器 UI

<input type="date" name="mydate">

and maybe my attempts to localize this field have been met with frustration because niceties like localization have not yet been included in their implementation, but I don't even see mention of it in the HTML5 spec. Is there a way that localization should be specified? Should I do lang="fr" on a parent element?

也许我对本地化这个领域的尝试遇到了挫折，因为像本地化这样的细节尚未包含在他们的实现中，但我什至没有在 HTML5 规范中看到它的提及。有没有办法指定本地化？我应该在父元素上做 lang="fr" 吗？

Some notes on the implementation of the site in question:

关于相关网站实施的一些说明：

• Localization (language) is explicitly picked by the user because they are managing data in multiple languages and it is not reasonable to expect that the user's browser chrome is in the language being viewed or that the browser is providing desired language request headers.
• I want to be sure that if the page is rendered in French that the date picker provided by browser chrome shows options that make sense for French language.
• The plan is to fall back to jQueryUI for browsers that do not support type="date", I will use the detection mechanism provided in Dive into HTML 5

• 本地化（语言）由用户明确选择，因为他们以多种语言管理数据，并且期望用户的浏览器 chrome 使用正在查看的语言或浏览器提供所需的语言请求标头是不合理的。
• 我想确保如果页面以法语呈现，浏览器 chrome 提供的日期选择器会显示对法语有意义的选项。
• 计划是为不支持 type="date" 的浏览器回退到 jQueryUI，我将使用Dive into HTML 5 中提供的检测机制

采纳答案by Patrick H. Lauke

From what i know, the thinking behind what we do in Opera (full disclosure: I work for them) is that the date picker is almost an extension of the chrome, a browser-native control. As such, it will be localised according to the language of the browser, rather than the language of the page being viewed.

据我所知，我们在 Opera 中所做的事情背后的想法（完全披露：我为他们工作）是日期选择器几乎是 chrome 的扩展，浏览器原生控件。因此，它将根据浏览器的语言而不是正在查看的页面的语言进行本地化。

回答by Dieter Raber

I agree with lambacck. Currently I am writing Javascript code to make the new form features available cross browser, using jQuery UI for this.

我同意兰巴克。目前我正在编写 Javascript 代码以使新的表单功能可以跨浏览器使用，为此使用 jQuery UI。

I work in Luxemburg which is a good place to illustrate the localization problem in more detail.

我在卢森堡工作，这是一个更详细地说明本地化问题的好地方。

Most websites we write are multilingual de|fr|en. From our stats we can tell, that people use the language switch on the site to display their preferred language, but this choice rarely matches the preferred browser locale.

我们编写的大多数网站都是多语言 de|fr|en。从我们的统计数据中我们可以看出，人们使用网站上的语言切换来显示他们的首选语言，但这种选择很少与首选浏览器区域设置相匹配。

If the locale of the calendar etc. field is done by the OS, this brings us back to the unfortunate <input type=file>situation where the label reads Upload a fileand the button says Parcourir. You can do nothing about this language mix and I always found this to be a major annoyance.

如果日历等字段的区域设置是由操作系统完成的，这将让我们回到不幸的<input type=file>情况，其中标签显示Upload a file并且按钮显示Parcourir。你对这种语言组合无能为力，我总是发现这是一个主要的烦恼。

Conclusion, I have to overwrite the default calendar with the jQuery one to be sure it does what I want.

结论，我必须用 jQuery 覆盖默认日历，以确保它符合我的要求。

In my opinion a configurable API or at least a way to manipulate the locale on a HTML level would be great. Since the new field types are not widely adopted yet by the other browser manufacturers, I imagine this issue could still be taken in account.

在我看来，一个可配置的 API 或至少一种在 HTML 级别上操作语言环境的方法会很棒。由于新的字段类型还没有被其他浏览器制造商广泛采用，我想这个问题仍然可以考虑。

Thanks for reading this.

感谢您阅读本文。

回答by robocat

For mobile the best solution we have found is to use a text input for date entry, with a calendar icon next to it that has an invisible date input over the icon.

对于移动设备，我们发现的最佳解决方案是使用文本输入进行日期输入，旁边有一个日历图标，该图标上有一个不可见的日期输入。

Advantages:

好处：

• works on all browsers and devices
• can use next button into date on iOS (if multiple fields)
• user can type in date (very useful)
• avoids iOS UI bugs (1. editing existing data with blank date, next into date, date value is set to today - arrrgh, 2. keyboard showing, next into date, popup shows and keyboard disappears - ouch)
• use a date library to show date in input as localisation set for your user's account (not browser), and can use a smart date library (type in "tomorrow" etc).
• click calendar icon to see date as browser localisation
• graceful fallback even if input type=datenot supported by device/browser (e.g. some Android devices don't support date or have serious bugs).
• for desktop (detected by no touch support) we show our own custom date dropdown.

• 适用于所有浏览器和设备
• 可以在 iOS 上使用下一个按钮进入日期（如果有多个字段）
• 用户可以输入日期（非常有用）
• 避免 iOS UI 错误（1. 用空白日期编辑现有数据，下一个日期，日期值设置为今天 - arrrgh，2. 键盘显示，下一个日期，弹出显示和键盘消失 - 哎哟）
• 使用日期库将输入中的日期显示为用户帐户（不是浏览器）的本地化设置，并且可以使用智能日期库（输入“明天”等）。
• 单击日历图标以将日期视为浏览器本地化
• 即使input type=date设备/浏览器不支持，也能正常回退（例如，某些 Android 设备不支持日期或存在严重错误）。
• 对于桌面（通过无触摸支持检测到），我们显示我们自己的自定义日期下拉列表。

HTML is a something like:

HTML是这样的：

<input type=text>
<span style=position:relative>
  <input type=date class=date-input tabIndex=-1>
  <div class=date-input-icon>&#x25BC;</div>
</span>

CSS:

CSS：

.date-input {
  position: relative;
  z-index: 1;
  webkit-appearance: none;
  display: inline-block;
  opacity: 0;
  width: 1em;
}

.date-input-icon {
  position: absolute;
  right: 0;
  width: 1em;
}