WordPress是否在Admin中提供Native Datepicker?
我正在开发一个插件,在管理员中我提供了一个由具有日期的用户填写的字段。 我想知道WP Admin I中是否有可用的原生日期选择器。
我通常会包含一个小的jQuery datepicker脚本来执行它,但如果一个已经可用,我会更喜欢这个明显的原因,如更轻的代码,UI一致性等。这似乎是应该/应该包括但我没有能够在管理员中找到有关jQuery内容(如果有)的文档。
已经给出了答案,但是我想扩展它以包括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
注册样式表(我使用Google托管的那个,你可以使用你喜欢的任何一个) - 有效地将样式表包含在此页面中由Wordpress加载的样式表中
而现在你的Datepickers将是美好而多彩的! 🙂
HTML5礼物
这不是OP所要求的,但它与问题有些相关:如果你不想打扰添加Datepicker,你可以尝试HTML5日期输入,让浏览器创建一个非常好的(默认)日期选择器:
是的,不需要任何其他东西(它也适用于Wordpress的后端: https : //jsfiddle.net/2jxdvea0/
有关MDN的更多信息: https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
注意正如@mark指出的那样,输入不适用于Firefox(以及其他浏览器)。 这在MDN页面中有说明,但当然也应该在这里提到。 当然,这个问题有解决方法,但写这些问题超出了这个问题的范围。
更新 03-11-2017截至@ kosso的评论,Firefox支持这一版本将在第57版中发布
是。 WordPress在核心中包含了这一点。 这里有几篇关于它的文章:
WP Codex:函数参考/ wp入队脚本
保罗安德伍德的虹膜颜色选择器教程 (相同的原则适用于datepicker)
添加以下代码行以从插件中排队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”的任何字段:
现在,您只需将类“custom_date”添加到HTML代码中的日期字段,当用户点击该字段时,它将显示日期选择器日历。
- jquery ui datepicker按钮的类
- 选择当前日期后,bootstrap-datepicker清空字段
- 加载时jQuery datepicker表示未定义。
- 为什么jquery datepicker不能在textarea上工作,只能在输入上工作
- jquery datepicker将事件添加到下一个和上一个按钮
- JavaScript:jQuery Datepicker – 特定日子的简单突出显示,谁可以提供帮助? (来源)
- jQuery – 如何在初始化之后更改Datepicker设置
- 使用日期字符串数组在bootstrap datepicker中设置禁用月数不起作用
- 使用setdate为jQueryUI datepicker创建“<previous”和“next”(日期)链接时出错