CCh*_*oma 14 wordpress jquery datepicker
我正在开发一个插件,在管理员中我提供了一个由具有日期的用户填写的字段.我想知道WP Admin I中是否有可用的原生日期选择器.
我通常会包含一个小的jQuery datepicker脚本来执行它,但是如果已经有一个可用,我会更喜欢这个明显的原因,比如更轻的代码,UI一致性等等.这似乎是应该/应该包含的内容但我没有能够在管理员中找到有关jQuery内容(如果有)的文档.
Ere*_*Paz 19
已经给出了答案,但我想扩展一点,包括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(我使用Google托管的样式表,您可以使用您喜欢的任何一个)而现在你的Datepickers将是美好而多彩的!:)
HTML5礼物
这不是OP所要求的,但它与问题有些相关:如果您不想添加Datepicker,您可以尝试HTML5 date输入类型,让浏览器创建一个非常好的(和默认)datepicker :
<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页面中有说明,但当然也应该在这里提到.当然,这个问题有解决方法,但写这些问题超出了这个问题的范围.
更新 03-11-2017截至@ kosso的评论,Firefox支持此版本将在第57版中发布
CCh*_*oma 10
是.Wordpress在核心中包含了这一点.这里有几篇关于它的文章:
保罗安德伍德的虹膜颜色选择器教程(相同的原则适用于datepicker)
小智 6
添加以下代码行以将您的插件中的 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=""/>