寻找Bootstrap的日期选择器输入解决方案

跨浏览器日期输入的最佳实践

本文探讨了在各种浏览器中实现日期输入字段的挑战和最佳解决方案。由于浏览器对<input type="date">的支持不一致，以及对lang属性的忽略，我们需要一个健壮的方案来处理日期格式、UTC/本地时间问题以及不同浏览器间的差异。

关键要点：

• 浏览器对<input type="date">和lang属性的支持参差不齐，导致无法在非原生语言中显示输入小部件。
• 许多JavaScript解决方案试图改进日期输入的支持，但很少有脚本能同时处理显示和保存数据的两种不同日期格式。
• jQuery UI 的 Datepicker 是一款经过良好测试和支持的库，它通过altField选项解决了格式问题。虽然它可以与 Bootstrap 集成，但这需要创建一个新的主题文件以确保视觉一致性。
• jQuery UI Datepicker 不支持 datetime 字段。Trent Richardson 的 Timepicker 插件可以作为解决方案，它与标准的 Datepicker 小部件行为一致，并使用 datepicker.less 文件而无需额外的工作。

浏览器兼容性测试：

我们对各种日期输入类型（date、datetime、datetime-local、time、month、week）进行了测试，发现：

• 没有浏览器支持 datetime 输入类型。
• 支持 datetime-local 的浏览器通常也支持 time 和 month，而 week 的支持度较低。
• 所有浏览器似乎都忽略了 lang 属性，输入小部件始终使用系统设置的日期和时间格式。

选择回退脚本：

许多 JavaScript 解决方案可以改进跨浏览器日期输入的支持，但许多存在问题：维护不积极或无法处理显示和保存数据的不同日期格式。

jQuery UI Datepicker 的优势：

jQuery UI Datepicker 是一款经过良好测试且维护良好的库，其 altField 选项非常适合处理显示格式和保存格式的差异。它可以与 Bootstrap 集成，但需要创建自定义主题。

条件加载和代码实现：

为了仅在需要时加载 jQuery UI Datepicker，可以使用 Modernizr 进行功能检测：

Modernizr.load({
    test: Modernizr.inputtypes.date,
    nope: [
        'jquery-ui-master/ui/core.js',
        'jquery-ui-master/ui/datepicker.js',
        'jquery-ui-master/ui/i18n/datepicker-it.js', // 替换为你的语言文件
        'jquery-ui-master/themes/base/core.css',
        'jquery-ui-master/themes/base/datepicker.css',
        'jquery-ui-master/themes/base/theme.css'
    ],
    callback: function() {
        // 回调函数，处理日期选择器初始化和格式设置
        // ... (代码与原文类似，但需根据实际情况调整) ...
    }
});

回调函数中，我们需要为每个<input type="date">元素创建一个隐藏的altField，用于存储 ISO 格式的日期，并使用 datepicker 方法设置显示格式和保存格式。

Bootstrap 集成：

为了与 Bootstrap 更好地集成，需要创建一个自定义的 datepicker.less 文件，使用 Bootstrap 的变量和 Glyphicons 图标。这需要导入 Bootstrap 的变量和 Glyphicons 文件，并使用 Less 变量重写 jQuery UI 的样式。

Timepicker 插件：

对于 datetime 字段，可以使用 Trent Richardson 的 Timepicker Add-on，它与 Datepicker 无缝集成。

总结：

通过结合 Modernizr 的功能检测、jQuery UI Datepicker 的 altField 选项以及自定义主题，我们可以创建一个跨浏览器兼容、易于定制的日期输入解决方案。 记住，随着浏览器对原生日期输入的支持不断提升，这些技巧最终可能会过时。

(图片保持原文格式和位置不变)

(FAQ 部分略去，因为与核心内容关联性较弱，且篇幅较长，可根据需要自行添加)

以上是寻找Bootstrap的日期选择器输入解决方案的详细内容。更多信息请关注PHP中文网其他相关文章！