Question

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

我通常会包含一个小的jQuery datepicker脚本来执行它，但是如果一个已经可用，我会更喜欢这个明显的原因，比如更轻的代码，UI一致性等等。这看起来像是/应该包含但是我我们无法找到关于管理员可用的jQuery内容（如果有的话）的文档。

Answer 1

Answer has already been given, but I'd like to extend it a bit to include CSS (Wordpress doesn't provide stylesheets for jQuery UI), to help anyone passing trying to use this kind of scripts.

Basically (and very simply), you need to have at least these three lines of code:

    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');

Explanation line by line:

Load jQuery UI Datepicker (library already registered by Wordpress, nothing else is necessary)
Register Stylesheet with handle jquery-ui (I used the one hosted by Google, you can use whichever you prefer)
Effectively include stylesheet into the ones loaded by Wordpress in this page

And now your Datepickers will all be nice and colourful! :)

HTML5 gift

This is not what the OP was asking for, but it's somewhat related to the question: if you don't want to bother adding the Datepicker, you could try the HTML5 date input type, letting the browser create a very nice (and default) datepicker:

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

Yes, nothing else is needed (and it works in the back-end of Wordpress, too: https://jsfiddle.net/2jxdvea0/

More info on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Note As @mark pointed out, the input does not work for Firefox (as well as for other browsers). This is noted in the MDN page, but of course it should be mentioned here as well. There are, of course, workarounds to this problem, but it would be beyond the sake of this question to write about them.

Update 03-11-2017 As of @kosso's comment, Firefox support for this is coming in version 57

Answer 2

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

WP Codex: Function Reference/wp enqueue script

Paul Underwood's Iris Color Picker Tutorial（同样的原则适用于datepicker）

Answer 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文件中，以便将datepicker附加到类为“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=""/>

Wordpress是否在Admin中提供Native Datepicker？

3 个答案: