这是一个非常常见的需求，比如活动报名、预约服务、会议登记等场景,都需要用户提交日期信息。
（图片来源网络，侵删）
处理日期主要有两种方式：
- HTML5 原生日期输入框：（推荐） 最简单、最规范的方式，用户体验好,提交的数据格式统一。
- 手动输入文本框：最传统的方式，但需要用户自己输入格式，容易出错,后台处理也麻烦。
下面我们分别介绍这两种方法的实现步骤和注意事项。
使用 HTML5 <input type="date"> (强烈推荐)
这是目前最标准、最便捷的方法，它会在现代浏览器中直接显示一个日期选择器，用户只需点击选择，无需手动输入,保证了数据格式的统一性。
步骤 1：在后台创建自定义表单
-
登录 DedeCMS 后台。
（图片来源网络，侵删） -
进入 【核心】 -> 插件】 -> 【自定义表单】。
-
点击 【增加一个新的自定义表单】。
-
填写表单基本信息：
- 表单名称：给你的表单起个名字，方便识别，活动报名表”。
- 数据表：保持默认的
dede_addonsoft即可,除非你有特殊需求。 - 默认表单模板：可以不填,稍后我们手动创建。
- 列表模板：可以不填,稍后我们手动创建。
- 项目名称：这里填写你的字段名，
activity_date。注意： 这个名称必须由英文字母、数字或下划线组成，不能有中文和特殊符号,因为它是作为数据库字段名存在的。 - 字段提示文字：这里填写在前端显示给用户的提示信息，
* 请选择活动日期。 - 字段类型：这是最关键的一步！ 选择
（文本），虽然我们想存日期，但在 DedeCMS 的自定义表单里，日期通常以文本形式存储（格式如YYYY-MM-DD）,所以选择文本类型即可。 - 是否必填：根据你的需求选择。
- 默认值：可以留空，或者设置一个默认日期，格式如
2025-01-01。 - 其他选项：保持默认即可。
-
点击 【确定】 保存。
步骤 2：在前端页面调用表单
-
在你的网站前台页面（
activity.html），使用 DedeCMS 的标签调用表单。 -
在需要显示表单的位置,插入以下代码：
{dede:loop table='dede_addonsoft' sort='id' row='1'} <form action="/plus/diy.php" enctype="multipart/form-data" method="post"> <input type="hidden" name="action" value="post" /> <input type="hidden" name="diyid" value="{dede:field.id/}" /> <input type="hidden" name="do" value="2" /> <!-- 这里是其他字段，比如姓名 --> <p> <label>姓名：</label> <input type="text" name="name" id="name" class="intxt" /> </p> <!-- 这里是日期字段 --> <p> <label>活动日期：</label> <!-- 关键代码：使用 input type="date" --> <input type="date" name="activity_date" id="activity_date" class="intxt" /> </p> <p> <label>备注：</label> <textarea name="remarks" id="remarks" rows="5" cols="50"></textarea> </p> <p> <button type="submit" name="submit">提交</button> </p> </form> {/dede:loop}代码解释：
name="activity_date"：这里的activity_date必须和你在后台步骤 1 中设置的 【项目名称】 完全一致。input type="date"：这就是 HTML5 的日期输入控件,浏览器会自动渲染成日期选择器。
步骤 3：查看和管理提交的数据
- 用户在前端选择日期并提交后,数据会存入数据库。
- 回到 DedeCMS 后台，进入 【核心】 -> 插件】 -> 【自定义表单】。
- 点击你刚刚创建的表单名称（如“活动报名表”）。
- 在列表页面，你就能看到所有用户提交的数据。【活动日期】 这一列会显示用户选择的日期，格式清晰，如
2025-05-20。
使用普通文本框手动输入 (不推荐)
如果因为兼容性等原因（比如需要支持非常老旧的浏览器）必须使用文本框,你需要做更多的工作来保证数据格式正确。
步骤 1 & 2：创建表单和前端页面
这部分和方法一基本相同，只是在 【字段类型】 处依然选择 （文本），但在前端调用时，将 input 的类型改为 text。
<!-- 在前端页面 -->
<p>
<label>活动日期 (格式: YYYY-MM-DD)：</label>
<input type="text" name="activity_date" id="activity_date" class="intxt" placeholder="2025-12-31" />
</p>
额外步骤：添加 JavaScript 日期选择器
纯文本框用户体验很差，容易输错格式（2025/1/1 或 1-1-2025）,最佳实践是为它绑定一个日历组件。
这里以一个轻量级的 jQuery 日历插件 My97DatePicker 为例，这是 DedeCMS 社区中非常流行的选择。
- 下载插件：从网上搜索并下载
My97DatePicker插件。 - 上传文件：将下载的
WdatePicker.js文件上传到你的网站目录，/js/目录下。 - 修改前端代码：在你的 HTML 页面头部引入 JS 文件,并修改日期输入框的代码。
<!-- 1. 在页面 <head> 标签内引入 JS 文件 -->
<script type="text/javascript" src="/js/WdatePicker.js"></script>
<!-- 2. 修改日期输入框，添加 onclick 事件 -->
<p>
<label>活动日期：</label>
<!-- 关键：添加 onclick="WdatePicker()" -->
<input type="text" name="activity_date" id="activity_date" class="intxt" onclick="WdatePicker()" />
</p>
当用户点击这个文本框时，就会弹出一个日历，可以选择日期，插件会自动将格式化为 YYYY-MM-DD 并填入框中,大大提升了用户体验和数据规范性。
总结与对比
| 特性 | 方法一 (input type="date") | 方法二 (文本框 + JS插件) |
|---|---|---|
| 实现复杂度 | 非常简单，原生支持 | 较复杂，需要额外引入 JS 文件和绑定事件 |
| 用户体验 | 极佳，浏览器原生日历 | 良好，依赖第三方插件 |
| 数据格式 | 统一、规范 (YYYY-MM-DD) | 依赖插件强制格式，或需后台校验 |
| 兼容性 | 现代浏览器 (Chrome, Firefox, Edge, Safari) | 兼容性好，可支持所有浏览器 |
| 推荐度 | ⭐⭐⭐⭐⭐ (强烈推荐) | ⭐⭐ (作为兼容性备选方案) |
除非你的网站需要支持非常老旧、不支持 HTML5 的浏览器，否则请务必使用方法一 (input type="date") ，它是最符合现代 Web 标准的做法,能让你省去很多后端数据处理的麻烦。
