【免费下载】 jeDate 日期控件使用教程

2026-01-17 09:12:14作者：翟江哲Frasier

jeDate V6.5.0 是一款原生JS开发的不依赖任何第三方库大众化的日期控件，她身兼多职，虽不是万能的，但是她却是功能强大多样的美少女，她除了包含单双面板、区域选择、多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。更多的是需要你与她的亲密接触与呵护！

项目地址：https://gitcode.com/gh_mirrors/je/jeDate

1. 项目的目录结构及介绍

jeDate 是一个原生 JavaScript 开发的日期控件，不依赖任何第三方库。项目的目录结构如下：

jeDate/
├── css/
│   └── jeDate.css
├── js/
│   └── jeDate.js
├── index.html
├── README.md
└── LICENSE

css/ 目录包含日期控件的样式文件 jeDate.css。
js/ 目录包含日期控件的核心脚本文件 jeDate.js。
index.html 是示例页面，展示了如何使用 jeDate 控件。
README.md 是项目的说明文档。
LICENSE 是项目的开源许可证。

2. 项目的启动文件介绍

项目的启动文件是 index.html，它包含了 jeDate 控件的基本使用示例。以下是 index.html 的部分代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jeDate 日期控件示例</title>
    <link rel="stylesheet" href="css/jeDate.css">
</head>
<body>
    <input type="text" id="datePicker" placeholder="选择日期">
    <script src="js/jeDate.js"></script>
    <script>
        jeDate("#datePicker", {
            format: "YYYY-MM-DD"
        });
    </script>
</body>
</html>

在这个示例中，我们通过引入 jeDate.css 和 jeDate.js 文件，并在页面中添加一个输入框，使用 jeDate 函数初始化日期控件。

3. 项目的配置文件介绍

jeDate 控件的配置主要通过 JavaScript 代码进行。以下是一些常用的配置选项：

jeDate("#datePicker", {
    format: "YYYY-MM-DD", // 日期格式
    isShow: true, // 是否显示日历
    theme: "default", // 主题样式
    language: "zh-CN", // 语言
    range: false, // 是否为范围选择
    multiPane: true, // 是否为多面板
    festival: true, // 是否显示节日
    onClose: function() {
        console.log("日期选择关闭");
    }
});