dede时间选择器怎么用？-DEDE建站-盈思创科技

在 DedeCMS 中，时间选择器通常出现在后台内容编辑、发布文档、自定义表单等需要用户输入或选择时间的场景，它极大地提升了用户体验,避免了手动输入日期格式错误的问题。

（图片来源网络，侵删）

核心组件：My97DatePicker

DedeCMS 早期版本内置的时间选择器组件是 My97DatePicker，这是一个非常流行且功能强大的日期控件，理解这个组件是掌握 DedeCMS 时间选择器的关键。

如何在前台模板中使用时间选择器？

虽然时间选择器主要用于后台，但如果你在前台模板（如会员中心发布信息、自定义表单提交页面）也需要使用,方法如下：

基础用法（单行文本框）

最简单的方式是使用一个标准的 HTML <input> 标签，并为其添加特定的 class 和 id。

代码示例：

（图片来源网络，侵删）

<input type="text" name="pubdate" id="pubdate" class="input-text" style="width:150px;" />

关键点：

name="pubdate"：提交表单时，这个 name 值会作为参数传递给后台。
id="pubdate"：JavaScript 会通过这个 id 来初始化时间选择器。这个 id 必须与下面 JavaScript 代码中的 id 一致。
class="input-text"：这是一个 DedeCMS 样式类,让你的输入框看起来更美观。

初始化时间选择器（JavaScript）

光有输入框还不够，你需要用 JavaScript 来告诉这个输入框何时以及如何弹出时间选择器。

代码示例：

<script language="javascript" type="text/javascript" src="{dede:global.cfg_cmspath/}/include/My97DatePicker/WdatePicker.js"></script>
<script language="javascript">
    // 当页面加载完成后执行
    window.onload = function() {
        // 为 id 为 'pubdate' 的元素绑定 My97DatePicker
        WdatePicker({
            el: 'pubdate', // 绑定的元素 ID
            dateFmt: 'yyyy-MM-dd HH:mm:ss', // 日期显示格式
            skin: 'default', // 皮肤样式
            maxDate: '%y-%M-%d' // 最大可选日期为今天
        });
    }
</script>

参数解释：

（图片来源网络，侵删）

src="{dede:global.cfg_cmspath/}/include/My97DatePicker/WdatePicker.js"：这是引入 My97DatePicker 核心 JS 文件的路径。{dede:global.cfg_cmspath/} 是 DedeCMS 的全局变量，代表你的网站根目录,这样写能保证路径正确。
el: 'pubdate'：指定哪个输入框需要被激活，这里的值必须和 <input> 的 id 属性值完全一致。
dateFmt: 'yyyy-MM-dd HH:mm:ss'：这是非常重要的参数，它定义了日期的显示格式。
- yyyy：四位年份
- MM：两位月份 (01-12)
- dd：两位日期 (01-31)
- HH：24小时制的小时 (00-23)
- mm：分钟 (00-59)
- ss：秒 (00-59)
skin: 'default'：选择时间选择器的皮肤，如 default, whyGreen, Wdate 等。
maxDate 和 minDate：限制可选日期的范围，maxDate: '#F{$dp.$D(\'endDate\')}' 可以让开始日期不能晚于结束日期。

在后台系统中的应用

在 DedeCMS 后台，你不需要手动去写这些 HTML 和 JS 代码,系统已经为你封装好了。

通常在编辑模型（如文章、图集等）时,你会看到类似这样的字段定义：

后台字段定义示例：

发布时间(pubdate): <input type="text" name="pubdate" id="pubdate" value="<?php echo $arcRow['pubdate']; ?>" class="input-text" style="width:200px;" />

工作原理：

自动加载 JS：DedeCMS 的后台模板会自动在页面头部引入 WdatePicker.js,所以你不需要再手动引入。
自动绑定：系统在渲染这个输入框时，会自动在它旁边生成一个触发图标（通常是一个日历图标），并自动调用 WdatePicker() 函数来绑定这个输入框。
默认值：value="<?php echo $arcRow['pubdate']; ?>" 这行代码的作用是，在编辑一篇已存在的文章时，自动将该文章的发布时间填充到输入框中，如果是新建文章,这里通常是空的。

常见问题与解决方案

问题1：时间选择器点不动/不弹出

这是最常见的问题,原因通常是：

JS 文件路径错误：WdatePicker.js 文件丢失或路径不正确，检查 {dede:global.cfg_cmspath/}/include/My97DatePicker/ 目录下是否存在这个文件。
JS 冲突：页面中其他 JavaScript 库（如 jQuery）可能与 My97DatePicker 的符号或事件绑定产生冲突。
- 解决方案：确保 WdatePicker.js 在其他库之前加载，或者，在调用时使用 jQuery.noConflict() 模式。
CSS 样式覆盖：你网站的 CSS 样式可能无意中覆盖了时间选择器的定位或显示样式。
浏览器兼容性问题：虽然 My97DatePicker 兼容性很好,但极少数情况下特定浏览器或版本可能会有问题。

问题2：提交的时间格式不对

原因：数据库中 pubdate 字段是 int(10) 类型（Unix 时间戳），但你提交的是一个字符串格式，如 '2025-10-27 10:00:00'。
解决方案：DedeCMS 后台处理程序已经内置了转换逻辑，它会在你保存文章时，自动将输入框里的时间字符串转换成时间戳并存入数据库。你只需要确保 dateFmt 格式正确即可，无需担心转换问题。

问题3：如何修改时间选择器的皮肤？

方法：修改 WdatePicker() 函数调用中的 skin 参数。
- skin: 'default' (默认)
- skin: 'whyGreen' (绿色主题)
- skin: 'Wdate' (简洁主题)
自定义皮肤：你也可以自定义皮肤，创建自己的 CSS 文件，并在 WdatePicker.js 的配置中指定。

总结与最佳实践

前台使用：如果你需要在非 DedeCMS 默认的前台页面使用时间选择器,请务必：
- 正确引入 WdatePicker.js 文件。
- 给 <input> 标签设置唯一的 id。
- 使用 WdatePicker({el: 'your_id'}) 进行初始化。
- 根据需要配置 dateFmt、maxDate 等参数。
后台使用：通常无需关心，系统已集成，如果遇到问题，优先检查 JS 文件是否存在和路径是否正确。
格式统一：为了与 DedeCMS 后台保持一致，建议 dateFmt 使用 yyyy-MM-dd HH:mm:ss 格式。
时间戳：要记住，DedeCMS 数据库存储的核心时间格式是 Unix 时间戳（int(10)），所有的时间显示都是通过后台模板中的 GetDateTimeMK(@me) 等函数从这个时间戳转换而来的。

希望这份详细的解析能帮助你完全掌握 DedeCMS 的时间选择器！

dede时间选择器怎么用？

核心组件：My97DatePicker

如何在前台模板中使用时间选择器？

基础用法（单行文本框）

初始化时间选择器（JavaScript）

在后台系统中的应用

常见问题与解决方案

问题1：时间选择器点不动/不弹出

问题2：提交的时间格式不对

问题3：如何修改时间选择器的皮肤？

总结与最佳实践

相关文章

目录[+]