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文件中，以便将datepicker附加到类为“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前缀而不是$。

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

2 个答案: