自定义帖子类型管理员的日期选择器

时间:2020-06-16 作者:Zayd Bhyat

嘿,伙计们,我正在尝试让jQuery datepicker为自定义帖子类型的管理部分工作。本质上,我只需要一个日期,然后在数据库中存储该日期,然后查询数据库以选择月份之类的内容。现在我只想让datepicker ui开始工作,然后我就可以将数据添加到DB中。因此,我首先使用admin_print_stylesadmin_enqueue_scripts 分别地

function admin_styles() {
    wp_register_style(\'jqueryuicss\', \'//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css\', array(\'jquery-ui-styles\'), \'1.12.1\');
    wp_enqueue_style(\'jqueryuicss\');
 
}
add_action(\'admin_print_styles\', \'admin_styles\');

function admin_scripts() {
    wp_register_script(\'jqueryui\', \'//code.jquery.com/ui/1.12.1/jquery-ui.min.js\', array(\'jquery-ui\'), \'1.12.1\', true);
    wp_enqueue_script(\'jqueryui\');
}

add_action(\'admin_enqueue_scripts\', \'admin_scripts\');
然后,我将metabox添加到我的自定义帖子类型中。

function post_date_field() {
   echo \'<input type="text" id="jquery-datepicker" name="entry_post_date" value="\' . get_post_meta( $post->ID, \'entry_post_date\', true ) . \'">\';
}
function post_date_meta_box() {
  add_meta_box(\'entry_post_date\', \'Date\', \'post_date_field\', \'events\', \'side\', \'default\');
}
add_action(\'add_meta_boxes\', \'post_date_meta_box\');
我有一个库函数,它试图调用datepicker() 在js库文件中:

    function datepicker(){
        jQuery(\'#jquery-datepicker\').datepicker();
    };
日期元框出现在编辑帖子部分,但jqueryui样式和脚本似乎根本没有运行。关于如何进行这项工作,有什么建议吗?只需注册脚本和样式并排队,然后弹出日期选择器。

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

我在您的代码中注意到的问题我不知道您在哪里/如何调用该自定义datepicker() 函数,您应该使用相同的admin_enqueue_scripts 用于注册/排队样式表的挂钩(.css) 文件

您应该只在使用样式和脚本的页面上加载CSS和JS文件,例如,在您的情况下,您的events post类型,其中屏幕ID为events (CPT段塞)。

  • $post 未在中定义post_date_field() 函数-您应该使用function post_date_field( $post ).

    使日期选择器工作首先,将CSS和JS文件排队。

    注意:我使用了Smoothness theme, 但你可以随便选一个。我还使用了jQuery UI Datepicker库bundled in WordPress core 其中脚本句柄名称为jquery-ui-datepicker.

    function admin_styles() {
        if ( \'events\' === get_current_screen()->id ) {
            wp_enqueue_style( \'jquery-ui-smoothness\', // wrapped for brevity
                \'//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css\', [], null );
        }
    }
    add_action( \'admin_enqueue_scripts\', \'admin_styles\' );
    
    function admin_scripts() {
        if ( \'events\' === get_current_screen()->id ) {
            wp_enqueue_script( \'your-script\', // wrapped for brevity
                \'/path/to/your-script.js\', [ \'jquery-ui-datepicker\' ] );
        }
    }
    add_action( \'admin_enqueue_scripts\', \'admin_scripts\' );
    

    注意:我不使用自定义datepicker() 作用相反,我在文档完成后直接调用了日期选择器ready.

    // This code should be in your-script.js.
    
    jQuery( function ( $ ) {
        $( \'#jquery-datepicker\' ).datepicker();
    } );
    
  • 相关推荐

    嵌入CodePen Calorie脚本-jQuery错误

    我正在尝试嵌入此代码:https://codepen.io/jme11/pen/zMVJVX我的Wordpress关于健身,但我不知道为什么它不能正常工作-我已经下载了代码的导出,它在独立的HTML(+js和css)文件中工作得很好(特别是完成的表单将显示在results div中)。然后,我将HTML嵌入到我的Wordpress模板页面中,它显示在前端,很好,我已经按照HTML中相同的顺序正确链接了css和js,并将它们检入(查看源代码显示它们已连接)填写表格并点击calculate确实可以做一些事情(