jQuery DateTimePicker 使用教程-优快云博客

jQuery DateTimePicker 使用教程

【免费下载链接】datetimepicker jQuery Plugin Date and Time Picker 项目地址: https://gitcode.com/gh_mirrors/da/datetimepicker

jQuery DateTimePicker 是一个功能强大的日期时间选择器插件，集成了日期选择器(DatePicker)和时间选择器(TimePicker)的功能。该插件由 XDSoft 开发并维护，支持多种自定义选项和国际化设置。

项目介绍

jQuery DateTimePicker 是一个基于 jQuery 的开源插件，专门用于在网页表单中方便地选择日期和时间。它提供了丰富的配置选项，可以满足各种前端开发需求。

安装方法

通过 NPM 安装

npm install jquery-datetimepicker

通过 Yarn 安装

yarn add jquery-datetimepicker

手动下载安装

你也可以直接下载项目文件，将相关文件引入到你的项目中。

快速开始

基础引入

首先需要在 HTML 文件中引入必要的文件：

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

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

基本配置

以下是一个基本的配置示例：

jQuery('#datetimepicker').datetimepicker({
    format: 'Y-m-d H:i',
    timepicker: true,
    datepicker: true,
    step: 60
});

核心功能详解

日期选择器配置

如果只需要日期选择功能，可以这样配置：

jQuery('#datetimepicker').datetimepicker({
    timepicker: false,
    format: 'Y-m-d',
    minDate: '-1970/01/02',
    maxDate: '+1970/01/02'
});

时间选择器配置

如果只需要时间选择功能，可以这样配置：

jQuery('#datetimepicker').datetimepicker({
    datepicker: false,
    format: 'H:i',
    step: 5
});

国际化设置

DateTimePicker 支持多种语言设置：

// 设置全局语言
jQuery.datetimepicker.setLocale('zh');

// 中文配置示例
jQuery('#datetimepicker').datetimepicker({
    format: 'Y年m月d日 H:i',
    timepicker: true
});

高级功能

禁用特定日期

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

自定义日期样式

jQuery('#datetimepicker').datetimepicker({
    beforeShowDay: function(date) {
        // 自定义特定日期的样式
        return [true, "custom-date-style"];
    }
});

主题设置

DateTimePicker 支持暗色主题：

jQuery('#datetimepicker').datetimepicker({
    theme: 'dark'
});

常用配置选项

选项名称	类型	默认值	说明
format	string	'Y/m/d H:i'	日期时间格式
timepicker	boolean	true	是否显示时间选择器
datepicker	boolean	true	是否显示日期选择器
step	number	60	时间步长（分钟）
minDate	string	false	最小日期
maxDate	string	false	最大日期
defaultDate	string	false	默认日期

实际应用示例

表单中的日期时间选择

// 初始化日期时间选择器
$('#appointment_date').datetimepicker({
    format: 'Y-m-d H:i',
    minDate: new Date(),
    allowTimes: ['09:00', '10:00', '11:00', '14:00', '15:00', '16:00'],
    onSelectDate: function(ct, $input) {
        console.log('选择的日期：', ct);
    }
});

内联显示模式

$('#datetimepicker').datetimepicker({
    inline: true,
    value: '2015/04/15 05:03'
});

注意事项

最新版本中 'lang' 选项已过时，语言设置现在是全局的
使用 jQuery.datetimepicker.setLocale('en') 来设置语言
插件依赖 jQuery 1.7.2 或更高版本
支持响应式设计，适配移动设备

项目构建

如果需要构建项目，可以运行以下命令：

npm install
npm run build

构建完成后将生成以下文件：

build/jquery.datetimepicker.full.js - 浏览器文件
build/jquery.datetimepicker.full.min.js - 浏览器压缩文件
build/jquery.datetimepicker.min.js - AMD 模块风格的压缩文件

通过本教程，你可以快速上手使用 jQuery DateTimePicker 插件，为你的项目添加专业的日期时间选择功能。

【免费下载链接】datetimepicker jQuery Plugin Date and Time Picker 项目地址: https://gitcode.com/gh_mirrors/da/datetimepicker

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考