当前位置：首页 > jquery

jquery日期选择控件

2026-03-17 01:04:52jquery

jQuery日期选择控件推荐

jQuery提供了多种日期选择控件（DatePicker），以下是几种常用的插件及其使用方法：

jQuery UI DatePicker

jQuery UI DatePicker是官方提供的日期选择控件，功能丰富且易于使用。

<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">

Bootstrap DatePicker

Bootstrap风格的日期选择控件，适合在Bootstrap项目中使用。

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

<script>
$(function(){
    $('#datepicker').datepicker();
});
</script>

<input type="text" class="form-control" id="datepicker">

Flatpickr

轻量级且高度可定制的日期选择器，支持多语言和多种日期格式。

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

<script>
$(function(){
    $("#datepicker").flatpickr();
});
</script>

<input type="text" id="datepicker">

日期范围选择

如果需要选择日期范围，可以使用jQuery UI的DatePicker或专门的插件如daterangepicker。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<script src="https://cdn.jsdelivr.net/npm/moment/min/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" value="01/01/2020 - 01/31/2020" />

国际化支持

大多数日期选择插件支持多语言，可以通过配置实现。

// jQuery UI DatePicker国际化示例
$(function() {
    $("#datepicker").datepicker($.datepicker.regional["zh-CN"]);
});

// Flatpickr国际化示例
$(function(){
    $("#datepicker").flatpickr({
        locale: "zh"
    });
});

自定义日期格式

可以通过配置选项自定义日期显示格式。

// jQuery UI DatePicker自定义格式
$(function() {
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd"
    });
});

// Bootstrap DatePicker自定义格式
$(function(){
    $('#datepicker').datepicker({
        format: 'yyyy-mm-dd'
    });
});

禁用特定日期

某些插件允许禁用特定日期或日期范围。

// jQuery UI DatePicker禁用特定日期
$(function() {
    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            var day = date.getDay();
            return [(day != 0 && day != 6), ''];
        }
    });
});

时间选择功能

部分插件支持同时选择日期和时间。

jquery日期选择控件

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

<script>
$(function(){
    $("#datetime").flatpickr({
        enableTime: true,
        dateFormat: "Y-m-d H:i",
    });
});
</script>

<input type="text" id="datetime">

这些插件各有特点，可以根据项目需求选择合适的日期选择控件。