无法让jquery datepicker在Wordpress插件中运行

Question

I'm new to jquery and php and trying to create my first Wordpress Plugin. The plugin simply adds a metabox to posts which has a date field on the backend.

Metabox and field all added ok and appear when I go to create or edit a post.

However, I can't get the datepicker to work. Nothing happens when you click on the input box, the date selector does not show. Although the input box will only let me input numbers not letters.

The plugin is a single page of php code.

The top of my plugin file attempts to load the jquery:

function ca_load_jquery_datepicker() { 
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_style('jquery-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css');
}
add_action( 'admin_enqueue_scripts', 'ca_load_jquery_datepicker' );

Then this is the input and jquery in my form (lower down on the plugin file):

<input type="text" class="date" name="ca_expiry_date" value="">

        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('.date').datepicker({
                    dateFormat : 'yy-mm-dd'
                });
            });
        </script> 

Can anyone help advise where I am going wrong with the datepicker? Thank you!

UPDATE

Thanks for the comments, I have discovered that if I instal the "Classic Editor" plugin, my code works. But when that is not activated and using Gutenberg it does not work.

The error is (without sharing the site url): GET https://xxxx.co.uk/wp-content/themes/publisher/gutenberg-7.6.2.min.css?ver=7.6.2 net::ERR_ABORTED 404 (Not Found)

This error is still there even when my plugin is disabled.

However, if I activate the Twenty Nineteen theme there is no error but the date field in my plugin still does not work.

So clearly gutenberg does not like something in my code...

Answer 1

I would make sure to register the whole jquery-ui package from the remote official source in the functions.php of your current theme, like this:

function ca_load_jquery_ui() {
    // first, register the style from the remote official source
    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');
    // then, register the core file from the remote official source, in footer
    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( 'wp_enqueue_scripts', 'ca_load_jquery_ui' );

Note: if you want to use your calendar in the frontend, please make sure to use the function add_action( 'wp_enqueue_scripts', 'xxx' ); instead of add_action( 'admin_enqueue_scripts', 'xxx' ); which is only for the admin side.

---

UPDATE

You might also try to disable the default jQuery or jQuery-ui to see if that helps:

//remove the default jQuery script
function remove_default_jquery(&$scripts){
    if(is_admin()){
        // try this...
        $scripts->remove('jquery');
        // or...
        $scripts->remove('jquery-ui');
    }
}
add_filter( 'wp_default_scripts', 'remove_default_jquery' );