10个免费的开源Date Picker插件

1. Flatpickr

flatpickr插件

轻巧的Flatpickr插件易于使用，甚至易于设置。它在设计时考虑到了简单性，因此默认UI应该混合到任何布局中。

如果您看一下示例页面，您会发现此日期选择器不是很复杂。但这通常是用户想要的：一个简单的界面来输入数据并继续前进。

使用Flatpickr，您可以自定义初始日期，月份和年份，以及可以选择日期的限制。另外，您可以使用12H或24H时钟添加可选的时间参数。

毫无疑问，就其设计，UX和功能而言，这是更好的日期选择器插件之一。

2. Pickadate.js

pickadate js插件

我真正喜欢的另一个选择是Pickadate.js插件。它设计为适合移动设备且具有完全响应能力，因此它是所有设备的理想解决方案。

Pickadate在jQuery上运行，因此您确实需要该库作为依赖项。但是，此文件非常轻巧，并且不需要花很多时间就可以正常工作，因此即使使用jQuery，您也不会注意到任何页面滞后。

它提供了日期和时间选择菜单，因此无论您要收集什么数据，它都是功能齐全的选项。

3.日期范围选择器

日期范围选择器插件

输入范围选择器在计划程序和可视数据应用程序中极为常见。例如，Google Analytics（分析）使用自己的日期范围选择器来获取特定网站上的访问者数据。

要重新创建此效果，请尝试使用“ 日期范围选择器”。它被设计为适合Bootstrap的CSS样式表，但也可以单独使用。

此外，它还支持多月选择器，单月选择器以及常见日期范围（过去一周，过去一个月等）的预定义值。

迄今为止，我见过的设计最完善的JS范围选择插件。

4. Datepair.js

daterange js插件

要使用一些简单的方法进行范围选择，请尝试使用Datepair.js。

这依赖于双输入字段来选择范围的开始日期和结束日期。它还可以根据您的设置以及如何配置插件来包含时间范围。

这比单个日期选择器UI好吗？由您（或您的客户）决定。

但这是一个易于设置的插件，您的访问者可能更喜欢单字段输入。

5. DateTimePicker

日期时间选择器插件

这是一个界面异常的较为独特的插件之一。

该的DateTimePicker插件有它自己的响应下拉菜单，让用户使用加和减的图标选择他们的日期/时间。

一方面，这很容易跳转，只需点击几下即可快速更改月/年。但这也不是典型的日历UI，因此可能需要不熟悉此界面的用户进行一些调整。

一切都有优点和缺点，所以我说看看插件，看看您的想法。这确实支持单独的日期和时间输入，但是您也可以将它们组合在一起，只需单击一下即可选择日期时间。

6. glDatePicker

gldatepicker插件

有关详细设计和大量可选功能的信息，请查看glDatePicker插件。考虑到您得到了多少，这是相当轻巧的，缩小后的大小约为7KB。

它运行在jQuery之上，因此您也必须考虑这一点。但这是为日历日期选择屏幕提供华丽主题的少数几个插件之一。

它具有一些预先设计的模板，但是它还带有CSS属性，您可以自己重新设置样式。更不用说所有JS函数都有回调，因此，如果您对编码感到满意，可以将自己的功能添加到组合中。

7. Wickedpicker

wickedpicker插件

尽管从技术上讲这不是日期选择器，但它是其中最好的时间选择器之一。

Wickedpicker是jQuery支持的时间选择插件，可在任何输入字段上使用。它支持小时/分钟的用户输入和AM / PM设置。您也可以使用简单的JS选项在24小时时钟上运行它。

一些datepicker插件具有时间选择，但这是一项附加功能。该插件专为时间输入而设计，因此如果您需要的话，它是一个不错的选择。

8. Bootstrap Datepicker

bootstrap datepicker插件

任何熟悉Bootstrap的人都知道它对新项目有多有用。如果您经常在Bootstrap上设计站点，则应保留此Bootstrap Datepicker。

它是专门为BS3布局制作的少数几个插件之一，它也应该与即将推出的Bootstrap 4版本兼容。

该设计包括一个用于更改月份和年份的部分以及一个用于更改日期选择器中的分钟/小时的时间选择器。它完美地融合到了BS GUI中，因此对于使用Bootstrap的任何人来说，无疑是一个钉书钉。

9.基金会Datepicker

基金会datepicker插件

另一个流行的前端框架是Foundation，如果您更喜欢该库，则应该签出同样100％免费的Foundation datepicker。

它还带有一个时间选择器和一些选项，可以将时间包括在日期选择屏幕中。您甚至可以基于固定设置来定义日期（即仅某些可用日期），并将这些日期限制为特定时间。

您甚至可以使用15分钟间隔等固定选择来重新设置时间输入的样式。

您可以使用此插件做很多事情，因此对任何Foundation网站都非常有用。

10. FoxRunSoftware DatePicker

这是GitHub上jQuery datepickers的顶级插件之一。它的简称为“ DatePicker”，但与其余的区别在于它是FoxRunSoftware设计的插件。

它带有干净的界面，默认情况下，它使用3个月的GUI窗口进行日期选择。感觉有点像Google Analytics（分析）选择器，只是它有点小。

回调代码非常简单，并且您对如何管理UX拥有很多控制权。如果您想复制Analytics GUI，肯定值得保存一个日期选择器。

11. jQ Datepicker

jQuery datepicker免费插件

这是另一个带有简单名称为Datepicker的datepicker插件。它再次在jQuery上运行，但这是由中国开发人员Chen Fengyuan Chen设计的。

这个Datepicker插件非常了不起，它为新的JS开发人员提供了大量文档。

主演示页面非常适合玩耍，但是如果您想在网站上安装和运行此插件，请查看GitHub存储库。

而且，如果您正在寻找更多的datepicker插件，请尝试搜索GitHub。Web开发人员一直在发布新的插件，因此您永远不知道会发现什么。