jeDate 日期控件使用教程

项目介绍

jeDate 是一款使用原生 JavaScript 开发的日期控件，不依赖任何第三方库。它功能强大，支持单双面板、区域选择、多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减 N、日期标注点、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别等常规功能。

项目快速启动

安装

首先，你需要将 jeDate 项目克隆到本地：

git clone https://github.com/singod/jeDate.git

引入 jeDate

在你的 HTML 文件中引入 jeDate 的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="path/to/jeDate/jeDate.css">
<script src="path/to/jeDate/jeDate.js"></script>

初始化 jeDate

在你的 JavaScript 代码中初始化 jeDate：

document.addEventListener('DOMContentLoaded', function() {
    jeDate({
        dateCell: "#yourDateCell", // 日期选择器的 DOM 元素
        format: "YYYY-MM-DD",      // 日期格式
        isTime: true,              // 是否显示时间选择
        minDate: "1900-01-01",     // 最小日期
        maxDate: "2099-12-31"      // 最大日期
    });
});

应用案例和最佳实践

单日期选择

<input type="text" id="singleDate" placeholder="选择日期">
<script>
    document.addEventListener('DOMContentLoaded', function() {
        jeDate({
            dateCell: "#singleDate",
            format: "YYYY-MM-DD",
            isTime: false
        });
    });
</script>

日期范围选择

<input type="text" id="startDate" placeholder="开始日期">
<input type="text" id="endDate" placeholder="结束日期">
<script>
    document.addEventListener('DOMContentLoaded', function() {
        jeDate({
            dateCell: "#startDate",
            format: "YYYY-MM-DD",
            isTime: false,
            range: "#endDate"
        });
        jeDate({
            dateCell: "#endDate",
            format: "YYYY-MM-DD",
            isTime: false,
            range: "#startDate"
        });
    });
</script>

典型生态项目

jeDate 可以与其他前端框架和库结合使用，例如：

• jQuery: 虽然 jeDate 不依赖 jQuery，但可以与 jQuery 结合使用，以简化 DOM 操作。
• React: 可以在 React 项目中使用 jeDate，通过包装成 React 组件来使用。
• Vue.js: 可以在 Vue.js 项目中使用 jeDate，通过 Vue 指令或组件来集成。

通过这些结合使用，可以进一步扩展 jeDate 的功能和应用场景。