【亲测免费】 jQuery DateTimePicker 使用教程【datetime】

2026-01-16 10:10:10作者：虞亚竹Luna

项目介绍

jQuery DateTimePicker 是一个开源的日期时间选择器插件，由 XDSoft 开发并维护。该插件允许用户在网页表单中方便地选择日期和时间，支持多种自定义选项和国际化设置。它基于 jQuery 库，适用于各种前端开发项目。

项目快速启动

安装

首先，你需要将 jQuery 和 DateTimePicker 插件的文件包含到你的项目中。你可以通过以下方式下载并引入这些文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DateTimePicker 示例</title>
    <link rel="stylesheet" type="text/css" href="path/to/jquery.datetimepicker.css">
</head>
<body>
    <input id="datetimepicker" type="text">

    <script src="path/to/jquery.js"></script>
    <script src="path/to/jquery.datetimepicker.full.min.js"></script>
    <script>
        jQuery('#datetimepicker').datetimepicker();
    </script>
</body>
</html>

基本使用

以下是一个简单的示例，展示如何在输入框中添加 DateTimePicker：

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

<script>
    jQuery('#datetimepicker').datetimepicker({
        format: 'Y-m-d H:i',
        timepicker: true,
        datepicker: true
    });
</script>

应用案例和最佳实践

国际化设置

DateTimePicker 支持多种语言，你可以通过设置 i18n 选项来实现国际化：

jQuery('#datetimepicker').datetimepicker({
    i18n: {
        de: {
            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            dayOfWeek: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
        }
    },
    timepicker: false,
    format: 'd.m.Y'
});

禁用特定日期

你可以通过设置 disabledDates 选项来禁用特定的日期：

jQuery('#datetimepicker').datetimepicker({
    disabledDates: ['2023/10/01', '2023/10/02', '2023/10/03']
});

典型生态项目

结合 Moment.js

DateTimePicker 可以与 Moment.js 结合使用，以提供更强大的日期格式化和解析功能：

jQuery('#datetimepicker').datetimepicker({
    format: 'DD MM YYYY',
    formatDate: 'DD MM YYYY',
    datepicker: true,
    timepicker: false
});

与其他 jQuery 插件结合

DateTimePicker 可以与其他 jQuery 插件结合使用，例如 jQuery UI 的对话框插件，以创建更复杂的用户界面：

jQuery('#datetimepicker').datetimepicker();
jQuery('#dialog').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        "确定": function() {
            // 处理日期时间选择
            $(this).dialog("close");
        },
        "取消": function() {
            $(this).dialog("close");
        }
    }
});