jQuery Wordpress 是否在 Admin 中提供本机日期选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21869120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does Wordpress Provide Native Datepicker in Admin?
提问by CChoma
I am developing a plugin and in the admin where I provide a field that is filled in by users with a date. I am wondering if there is a native datepicker in the WP Admin I that is available.
我正在开发一个插件，并在管理员中提供一个由用户填写的日期字段。我想知道 WP Admin I 中是否有可用的本机日期选择器。
I usually include a small jQuery datepicker script that does it, but if one is already available I would prefer that for obvious reasons like lighter code, UI consistency, etc. This seems like something that would/should be included but I've not been able to find such documentation on what jQuery stuff, if any, are available in the Admin.
我通常会包含一个小的 jQuery datepicker 脚本来完成它，但如果一个已经可用，我更喜欢它，原因很明显，比如更轻的代码、UI 一致性等。这似乎是/应该包含的东西，但我没有能够在 Admin 中找到有关 jQuery 内容（如果有）的此类文档。
采纳答案by CChoma
Yes. Wordpress includes this in the core. Here are a couple articles about it:
是的。Wordpress 将其包含在核心中。这里有几篇关于它的文章：
WP Codex: Function Reference/wp enqueue script
Paul Underwood's Iris Color Picker Tutorial(same principles apply to datepicker)
Paul Underwood 的虹膜颜色选择器教程（同样的原则适用于日期选择器）
回答by Erenor Paz
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.
已经给出了答案，但我想对其进行一些扩展以包含 CSS（Wordpress 不提供 jQuery UI 的样式表），以帮助任何尝试使用此类脚本的人。
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
- 加载 jQuery UI Datepicker（库已经被 Wordpress 注册，不需要其他任何东西）
- 使用句柄注册样式表
jquery-ui（我使用的是 Google 托管的样式表，您可以使用任何您喜欢的样式） - 有效地将样式表包含在此页面中由 Wordpress 加载的样式中
And now your Datepickers will all be nice and colourful! :)
现在你的日期选择器将变得漂亮多彩！:)
HTML5 gift
HTML5 礼物
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 dateinput type, letting the browser create a very nice (and default) datepicker:
这不是 OP 所要求的，但它与问题有些相关：如果您不想费心添加日期选择器，您可以尝试使用 HTML5date输入类型，让浏览器创建一个非常好的（和默认的）日期选择器：
<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/
是的，不需要其他任何东西（它也适用于 Wordpress 的后端：https: //jsfiddle.net/2jxdvea0/
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
有关 MDN 的更多信息：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
NoteAs @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.
注意正如@mark 指出的，输入不适用于 Firefox（以及其他浏览器）。这在 MDN 页面中已注明，但当然也应在此处提及。当然，这个问题有解决方法，但写这些问题超出了这个问题的范围。
Update 03-11-2017As of @kosso's comment, Firefox support for this is coming in version 57
2017 年 3 月11 日更新截至 @kosso 的评论，Firefox 对此的支持将在 57 版中推出
回答by devendra singh
Add the following line of code to enqueue the jquery ui datepicker library from your plugin:
添加以下代码行以将您的插件中的 jquery ui datepicker 库加入队列：
wp_enqueue_script('jquery-ui-datepicker');
You can download the stylesheet file from the jquery ui library site and include it in your plugin. You would then enqueue the CSS file like the following:
您可以从 jquery ui 库站点下载样式表文件并将其包含在您的插件中。然后，您可以像下面这样将 CSS 文件加入队列：
wp_enqueue_style('jquery-ui-css', 'http://www.example.com/your-plugin-path/css/jquery-ui.css');
Alternatively, You can include the jquery ui CSS from Google (you don't need to ship the CSS files with your plugin if you go via this route):
或者，您可以包含来自 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');
Add the following JQuery code to your javascript file so it attaches the datepicker to any fields with a class of “custom_date”:
将以下 JQuery 代码添加到您的 javascript 文件中，以便将日期选择器附加到具有“custom_date”类的任何字段：
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.custom_date').datepicker({
dateFormat : 'yy-mm-dd'
});
});
</script>
Now, you can simply add class “custom_date” to the date fields in the HTML code and it will show a date picker calender when a user clicks on that field.
现在，您可以简单地将类“custom_date”添加到 HTML 代码中的日期字段，当用户单击该字段时，它将显示日期选择器日历。
<input type="text" class="custom_date" name="start_date" value=""/>
