随着 HTML5 的普及，<input type="date"> 已经成为网页上展示日期的标准方式。但是，各个浏览器对该输入类型的支持并不一致，有些浏览器甚至完全不支持。
本文将介绍如何在所有主流的浏览器上实现<input type="date">，包括 Chrome、Firefox、Safari、Edge 和 IE11。
1. 使用 Modernizr
Modernizr 是一个开源库，用于检测浏览器是否支持 HTML5 和 CSS3 特性。我们可以使用它来检测浏览器是否支持 type="date" 输入类型，并根据结果提供备选方案。
-- -------------------- ---- -------
--------- -----
------
------
--------------------
------- ---------------------------------------------------------------------------------------
-------
------
------ ------------------------
------ ----------- ----------
--------
-- ---------------------------- -
-- -------- ---- ----- ------ -- ----------
---------------------------- -
------------------------
---
-
---------
-------
-------2. 使用 jQuery UI Datepicker
jQuery UI Datepicker 是一个流行的 jQuery 插件，可以在不支持 type="date" 的浏览器上提供日期选择器。
-- -------------------- ---- -------
--------- -----
------
------
--------------------
----- ---------------- -------------------------------------------------------------
-------
------
------ ------------------------
------ ----------- ----------
------- --------------------------------------------------
------- --------------------------------------------------------
--------
---------------------------- -
------------------------
---
---------
-------
-------3. 使用 Flatpickr
Flatpickr 是一个轻量级的 JavaScript 库，用于在任何浏览器上提供日期选择器。
-- -------------------- ---- -------
--------- -----
------
------
--------------------
----- ---------------- ---------------------------------------------------------------------
-------
------
------ ------------------------
------ ----------- ----------
------- ------------------------------------------------------
--------
-------------------
---------
-------
-------结论
本文介绍了三种方法来在所有主流浏览器上实现<input type="date">。虽然 Modernizr 和 jQuery UI Datepicker 是可靠的备选方案，但它们需要引入额外的 JavaScript 库，而 Flatpickr 更加轻量级方便。
如果你需要提供更好的用户体验，推荐使用 Flatpickr。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15701