Wordpress 是不是在管理员中提供本机日期选择器？

Posted 2023-05-07

【中文标题】Wordpress 是不是在管理员中提供本机日期选择器？

【英文标题】：Does Wordpress Provide Native Datepicker in Admin?Wordpress 是否在管理员中提供本机日期选择器？

【发布时间】：2014-03-19 02:42:00

【问题描述】：

我正在开发一个插件，并在管理员中提供一个由用户填写的带有日期的字段。我想知道 WP Admin I 中是否有可用的本机日期选择器。

我通常会包含一个小的 jQuery datepicker 脚本来执行此操作，但如果已经有一个可用的脚本，我会更喜欢它，原因很明显，比如更轻的代码、UI 一致性等。这似乎是应该/应该包含的东西，但我我无法在管理员中找到有关 jQuery 内容（如果有的话）的此类文档。

【问题讨论】：

您在发表评论之前尝试阅读我的问题吗？我不是在问如何添加日期选择器。我说我已经这样做了。我在问 Wordpress Admin 中是否提供了一个。就像我可以添加到输入字段的类一样。如果您不理解问题，请不要发表评论。

是的，我做到了。答案很容易搜索，甚至可以尝试。另一种方法是查看 wp 控制面板中加载的文件。答案是不。您是否考虑过使用一些花哨的（可能是dev.w3.org/html5/markup/input.date.html）html5 标签？

顺便说一句，我的意思是除了 jquery datepicker 提供的之外，wp 没有特殊的 datepicker。这可以入队，无需添加额外的 datepicker 脚本。 CSS 呢？没有，你必须包括在内。获得良好 wp 反馈的最后一件事是考虑 wordpress.stackexchange.com

【参考方案1】：

答案已经给出，但我想对其进行一些扩展以包含 CSS（Wordpress 不提供 jQuery UI 样式表），以帮助任何尝试使用此类脚本的人。

基本上（而且非常简单），您至少需要有这三行代码：

    wp_enqueue_script('jquery-ui-datepicker');
    wp_register_style('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');
    wp_enqueue_style('jquery-ui');

逐行解释：

加载 jQuery UI Datepicker（已经被 Wordpress 注册的库，不需要其他任何东西） 用句柄jquery-ui注册样式表（我用的是谷歌托管的，你可以用你喜欢的那个） 在此页面中将样式表有效地包含到 Wordpress 加载的样式表中

现在您的日期选择器将变得漂亮多彩！ :)

HTML5 礼物

这不是 OP 所要求的，但它与问题有点相关：如果您不想麻烦添加 Datepicker，您可以尝试 HTML5 date 输入类型，让浏览器创建一个非常不错的（和默认的）日期选择器：

<input type="date" name="the_date" />

是的，不需要其他任何东西（它也适用于 Wordpress 的后端：https://jsfiddle.net/2jxdvea0/

有关 MDN 的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

注意 正如@mark 指出的那样，输入不适用于 Firefox（以及其他浏览器）。这在 MDN 页面中有说明，但当然也应该在这里提及。当然，有解决这个问题的方法，但写这些问题超出了这个问题的范围。

2017 年 3 月 11 日更新 根据@kosso 的评论，Firefox 对此的支持将在 57 版中推出

【讨论】：

感谢您的确认。令人震惊的是，在 2017 年，仍然没有适用于所有浏览器的通用日期/时间选择器 HTML 元素。

更新：Firefox 57 版对此提供了支持。

【参考方案2】：

是的。 Wordpress 将其包含在核心中。这里有几篇关于它的文章：

WP Codex: Function Reference/wp enqueue script

Paul Underwood's Iris Color Picker Tutorial（同样的原则也适用于日期选择器）

【讨论】：

嗨，感谢这个帖子，它对我有帮助。在 Paul 的网站上，特别是 datepicker 的示例，现在：paulund.co.uk/add-date-picker-to-wordpress-admin 但我认为，在 WP 中不是 jquery-ui-datepicker 的样式表：wp_enqueue_style('jquery-ui-datepicker');需要从 CDN 加载或保存在本地，例如：wordpress.stackexchange.com/questions/83322/…

【参考方案3】：

添加以下代码行以将 jquery ui datepicker 库从您的插件中排入队列：

wp_enqueue_script('jquery-ui-datepicker');

您可以从 jquery ui 库站点下载样式表文件并将其包含在您的插件中。然后，您可以将 CSS 文件排入队列，如下所示：

wp_enqueue_style('jquery-ui-css', 'http://www.example.com/your-plugin-path/css/jquery-ui.css');

或者，您可以包含来自 Google 的 jquery ui CSS（如果您通过此路线，则无需将 CSS 文件与您的插件一起提供）：

wp_enqueue_style('jquery-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');

将以下 JQuery 代码添加到您的 javascript 文件中，以便它将日期选择器附加到具有“custom_date”类的任何字段：

<script type="text/javascript">
jQuery(document).ready(function($) 
$('.custom_date').datepicker(
dateFormat : 'yy-mm-dd'
);
);
</script>

现在，您可以简单地将“custom_date”类添加到 HTML 代码中的日期字段，当用户单击该字段时，它将显示日期选择器日历。

<input type="text" class="custom_date" name="start_date" value=""/>