HTML 输入 jQuery UI datepicker vs iOS 原生日期输入答案

【问题标题】：HTML input jQuery UI datepicker vs iOS native date inputHTML 输入 jQuery UI datepicker vs iOS 原生日期输入
【发布时间】：2012-04-18 10:08:51
【问题描述】：

我有一个页面，其中有一些输入 type="text" 并附加了一个 jQuery UI 日期选择器，它以“2012 年 2 月 14 日”格式输入日期到字段中。伟大的。现在我需要为移动/小屏幕调整界面。我遇到的问题是，当 iPhone 用户点击文本输入时，会出现 jQuery 日期选择器，并且 iOS 还显示它是本机文本输入键盘。

我尝试使用 Modernizr 来检测 html5 inputtype=date 可用性并禁用 jQuery 日期选择器（如果可用）并将输入类型切换为“日期”，以便了解这一点的设备可以使用其本机输入。但是，这会以后端系统不理解的格式“2012-02-14”输入日期。根据以“2012 年 2 月 14 日”格式到达的日期，已经做了很多工作。

因此，如果有人可以提供帮助，我正在寻找一种仅让 jQuery UI 日期选择器出现在所有系统上的方法，或者寻找一种意味着可以强制本地日期/文本输入输入格式“2 月 14 日”的解决方案2012”。

【问题讨论】：

标签： ios html jquery-ui mobile webkit

【解决方案1】：

很遗憾，由于日期选择器格式与用户的系统设置相关联，因此无法覆盖它。

您实际上可以做的是让您的脚本根据可用的技术（例如 Modernizr.inputtypes.date）进行从 type="text" 到 type="date" 的动态切换。

您可以从那里嵌入一个隐藏字段并将当前日期字段的名称转换为该隐藏字段，然后将本地日期选择器中的日期格式解析为您想要的格式并设置该隐藏字段的值。

<input type="date" name="userSetDate"/>

到这里：

<input type="date"/>
<input type="hidden" name="userSetDate" value="mm/dd/yyyy"/>

由于格式的变化，困难在于将用户定义的格式解析为您想要的格式：

10-06-13 --> 是 2013 年 10 月 6 日还是 2013 年 6 月 10 日？

现在您可以做一些将顶级解决方案结合起来的事情，例如将标签设置为看起来像按钮，应用准确的 [for] 属性并将 datepicker 字段设置为 type="hidden" 并将 datepicker 应用于该.

<label for="fooDate">test</label>
<input type="hidden" name="fooDate" id="fooDate">

<script>
$('#fooDate').datepicker();
</script>

希望您（曾经，注意到发布日期）能够弄清楚！

【讨论】：