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

【问题标题】：Is there a way to localize input type="date" in HTML5有没有办法在 HTML5 中本地化 input type="date"
【发布时间】：2011-02-27 11:16:15
【问题描述】：

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

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

也许我尝试本地化该字段时遇到了挫折，因为本地化等细节尚未包含在它们的实现中，但我什至没有在 HTML5 规范中看到它的提及。有没有一种方法可以指定本地化？我应该对父元素执行 lang="fr" 吗？

有关网站实施的一些注意事项：

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

【问题讨论】：

标签： forms html datepicker

【解决方案1】：

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

【讨论】：

3 个问题： 1. 作为用户必须为日期选择器切换语言（chrome 与内容）是不和谐的。 2. 数据将在语言环境中呈现到页面，chrome（英文模式）能否理解法语，而 Juin 表示六月？ 3. 服务器端将期望在语言环境中格式化的数据并相应地解析，如果日期选择器确实为预期的语言环境格式化了日期，服务器将误解它。这些问题不仅限于日期。数字呢？法语使用逗号而不是小数。铬将如何处理？这种方法似乎是短视的。
1 它的作用就像所有浏览器中的文件类型输入......它也根据浏览器区域设置进行本地化，而不是页面。我可以看到支持和反对这一点的论据。 2 不太明白你的意思 - 假设这与 3 相关，无论日期选择器的 UI 如何显示，最终结果（然后传递给服务器）始终采用相同的 ISO 格式，无论UI 显示的语言。没有尝试过数字的东西（假设你的意思是输入类型=“数字”）...但是在这里我可以看到它确实有潜在的问题。不知道目前是否已本地化。
我不认为 ISO 格式是渐进增强的合理响应。如果浏览器回退到一个普通的输入框并且他们没有启用 Javascript（是的那些人存在）他们将不得不以 ISO 格式输入日期？如果用户不是技术人员，他们不太可能想要以 ISO 格式输入日期（甚至知道如何输入）。
根据current whatwg spec，通过递归查找lang属性确定节点的语言。我不认为很多浏览器都支持这个。
即使是现在，将近十年后，每个主流浏览器似乎仍然这样做。它仍然是错误的。日期输入是文档/页面的一部分，应该遵循封闭元素的lang 属性给出的语言环境。

【解决方案2】：

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

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

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

如果日历等字段的区域设置是由操作系统完成的，这会让我们回到不幸的标签读取的情况上传文件按钮显示 Parcourir。你对这种语言组合无能为力，我一直觉得这是一个主要的烦恼。

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

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

感谢您阅读本文。

【讨论】：

“标签读取上传文件并且按钮显示 Parcourir”：这只是意味着，您的应用程序不尊重用户的浏览器语言......
@feeela：如果您的网站有一个语言选择器让用户覆盖默认（浏览器提供的）语言...
用户（也许很不幸）明确要求在与浏览器/桌面设置不同的区域设置中的页面。我住在瑞典，似乎每个人（除了我）都在用英语运行他们的桌面，但每个人（包括我）都希望尽可能使用瑞典语。
这也发生在印度尼西亚（以及大多数东南亚地区）。大多数人都有针对操作系统和浏览器的英语本地化，但他们确实希望以当地语言查看页面内容。这确实是浏览器制造商的疏忽。他们的日期输入和文件输入应该尊重中定义的语言，而不是操作系统语言。

【解决方案3】：

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

优点：

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

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：

.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;
}

【讨论】：

问题是关于本地化而不是与使用本机 type=date 小部件相关的其他问题。答案中没有提到本地化。
没关系，我看到了使用 javascript 的本地化部分（这已经是公认的解决方案）。
当按钮提供选择 UI 时，隐藏日期输入而不是仅仅使用 type=text 有什么好处。
@lambackc。 JavaScript 可用于同步两个输入，但如果禁用 JavaScript，它将正常失败。本地化代码可以在服务器上运行，并使用 Ajax 来同步两个输入。主要优点是浏览器对日期输入的支持不完整，本地化也很糟糕，但是拥有本地日期选择器对用户来说真的很好用。只是说这个解决方案在移动端 YMMV 上非常适合我们。