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

Question

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

Answer 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=""/>

Answer 2

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

add_action('admin_enqueue_scripts', 'enqueue_date_picker');

至

add_action('admin_print_footer_scripts', 'enqueue_date_picker');

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