当前位置：首页 > jquery

jquery时间插件

2026-03-16 10:31:27jquery

jQuery时间插件推荐

jQuery时间插件可以帮助开发者快速实现日期和时间选择功能。以下是一些常用且功能强大的jQuery时间插件：

1. jQuery UI Datepicker

jQuery UI Datepicker是jQuery官方提供的日期选择插件，功能丰富且易于定制。支持主题化、多语言和日期范围限制。

jquery时间插件

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$(function() {
    $("#datepicker").datepicker();
});
</script>
<input type="text" id="datepicker">

2. Bootstrap DateTimePicker

Bootstrap DateTimePicker基于Bootstrap框架，支持日期和时间选择，界面美观且响应式设计。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<script>
$(function () {
    $('#datetimepicker').datetimepicker();
});
</script>
<input type="text" id="datetimepicker">

3. Timepicker

Timepicker是jQuery UI Datepicker的补充插件，专门用于时间选择，可以与Datepicker结合使用。

jquery时间插件

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<script>
$(function() {
    $('#timepicker').timepicker();
});
</script>
<input type="text" id="timepicker">

4. Flatpickr

Flatpickr是一个轻量级、无依赖的日期时间选择器，支持多种格式和主题。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
flatpickr("#flatpickr", {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
});
</script>
<input type="text" id="flatpickr">

5. Daterangepicker

Daterangepicker支持日期范围选择，适合需要选择时间段的场景。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
$(function() {
    $('input[name="daterange"]').daterangepicker();
});
</script>
<input type="text" name="daterange">