WordPress 自定义元框的日期选择器答案

【问题标题】：Date picker for WordPress custom meta boxesWordPress 自定义元框的日期选择器
【发布时间】：2017-04-19 05:55:27
【问题描述】：

我是 WordPress 新手。如何创建支持日期选择器的元框字段？

    function enqueue_date_picker(){
        wp_enqueue_script(
            'field-date', 
            get_template_directory_uri() . '/admin/field-date.js', 
            array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'),
            time(),
            true
        );  

        wp_enqueue_style( 'jquery-ui-datepicker' );
    }

add_action('admin_enqueue_scripts', 'enqueue_date_picker');

【问题讨论】：

标签： wordpress jquery-ui-datepicker

【解决方案1】：

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

wp_enqueue_script('jquery-ui-datepicker');

您可以从jquery ui library 站点下载样式表文件并将其包含在您的插件中。然后，您可以将 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=""/>

【讨论】：

【解决方案2】：

我做过类似的事情，但是将 tinyMCE 富文本编辑器应用于自定义元框。所以，看看你的代码，你应该改变：

add_action('admin_enqueue_scripts', 'enqueue_date_picker');

到

add_action('admin_print_footer_scripts', 'enqueue_date_picker');

如果您将使用 wordpress 中的核心 jQuery，请注意在您的 JS 文件中使用 jQuery 前缀而不是 $。

【讨论】：