如何实现带Timepicker的jQuery Datepicker选择器

您是否希望将日期时间选择器添加到您的应用程序中？通过添加带有日期的时间选择器，您的用户可以一起选择日期和时间。当您的应用程序需要存储日期和时间时，此功能很有用。

在本文中，我们研究了如何在他们的网站上添加日期时间选择器。

为了实现这个目标，我将介绍 2 个允许我们添加日期时间选择器的包。

• flatpickr ：轻量级且功能强大的日期时间选择器。
• jQuery Timepicker Addon：如果你想用 jQuery UI Datepicker 添加一个时间选择器，那么使用这个包。

我将为这两个包编写代码。 您可以选择其中任何一个适合您的项目。

使用 flatpickr 的日期时间选择器

flatpickr 是最受欢迎的库。 它添加了一个没有任何依赖项的日期时间选择器。 它不需要任何外部库，如 jQuery、Bootstrap 等。您只需包含 flatpickr 包的 JavaScript 和 CSS 文件，在选择器上传递配置即可。

您可以使用以下代码在 flatpickr 的帮助下添加日期时间选择器。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 
<input type="text" name="datetime" id="datetime" placeholder="Choose Date and Time" />
 
<script>
flatpickr("#datetime", {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
});
</script>

这不是很容易吗？ 您可以使用 flatpickr 实现更多。 按照他们的文档，您将获得大量配置选项。 flatpickr 提供的一些功能：

• 预加载日期
• 最小日期和最大日期
• 禁用日期
• 选择多个日期

jQuery Timepicker Addon

在我开始了解 flatpicker 之前，我在我的项目中使用 jQuery Timepicker Addon。 该软件包的开发人员最近停止更新库。 但就库的当前状态而言，它仍然可以正常工作。

此插件将时间选择器添加到 jQuery UI 日期选择器。 集成此插件后，您的 jQuery UI Datepicker 将类似于下面的屏幕截图。

In order to add this timepicker you have to follow the below steps.
为了添加这个时间选择器，您必须按照以下步骤操作。

• 包括 jQuery UI Datepicker 脚本和样式
• 包括 timepicker 插件的 CSS 和 JS 文件
• 在选择器上调用 datetimepicker() 方法

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" />
 
<input type="text" id="datepicker" placeholder="Choose Date and Time" />
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<script>
jQuery(function($) {
    $("#datepicker").datetimepicker();
});
</script>

在上面的代码中，我在选择器 #datepicker 上调用了 datetimepicker() 方法，它是输入的 id。 现在继续尝试一下。 您将看到日期和时间选项。 要选择时间，您需要滑动小时和分钟。

结论

我已经展示了 2 个在您的网站上添加日期时间选择器的包。 您可以使用其中任何一个，并集成一个日期时间选择器，允许用户选择日期和时间。 就个人而言，我推荐 flatpickr。 它重量轻，维护积极。