• Resolved webtent

    (@webtent)


    I have a plugin page under the Tools menu and trying to add the datepicker to a couple of date fields. It is working, but the style is not, I get a plain popup calendar with no styling, transparent, so hard to see. Here is my code following the examples at the page below….

    add_action( ‘admin_enqueue_scripts’, ‘enqueue_date_picker’ );
    function enqueue_date_picker(){
    wp_enqueue_script(
    ‘wmnf-jquery’,
    get_stylesheet_directory_uri() . ‘/wmnf/wmnf_jquery.js’,
    array(‘jquery’, ‘jquery-ui-core’, ‘jquery-ui-datepicker’),
    time(),
    true
    );
    wp_enqueue_style( ‘jquery-ui-datepicker’ );
    }

    I followed the example here, is the wp_enqueue_style supposed to add the style? I’m hoping perhaps this part just needs to be different for my version of WordPress.

    http://www.paulund.co.uk/default-scripts-to-add-in-wordpress-development

    If I replace the wp_enqueue_style with the google api URL it works….

    wp_enqueue_style(‘jquery-ui-css’, ‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css’);

    But I’d rather use built in WP if possible, what am I doing wrong?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you link to a Webpage with the problem?

    Thread Starter webtent

    (@webtent)

    Actually, it is in the admin section of the website, I am not authorized to give access.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You should be able to check your browser’s console section for things like HTTP errors to your CSS file.

    Thread Starter webtent

    (@webtent)

    I checked the console already, nothing there. The calendar pops up fine, just without style unless I use the google api URL.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So your stylesheet is loading (not 404ing)?

    Thread Starter webtent

    (@webtent)

    I’m not sure where the style sheet is supposed to come from when using the following line:

    wp_enqueue_style( ‘jquery-ui-datepicker’ );

    Here is a screenshot of what I get when using the above line:

    https://www.dropbox.com/s/0fcl0d4myg9wgm4/Capture.PNG?dl=0

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Where did you find that example to use:

    wp_enqueue_style( 'jquery-ui-datepicker' );

    ?
    The codex mentions this:

    If you are going to use some jQuery UI features you might have to provide your own CSS file: WordPress core does not have a full jQuery UI theme!

    https://codex.wordpress.org/Function_Reference/wp_enqueue_style

    Thread Starter webtent

    (@webtent)

    Makes sense of course, kinda what I thought. But wondered if perhaps the WP core was supposed to find it by the referenced name, the link I sent prior is what I followed.

    So, if I download and place the jquery UI css in my themes’ css/ folder, I should reference like this?

    wp_enqueue_style(‘jquery-ui-css’, get_template_directory_uri() . ‘/css/jquery-ui.css’);

    Thanks for the help!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes but if you’re using a Child Theme then it’ll be get_stylesheet_directory_uri instead of get_template_directory_uri

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Adding jQuery datepicker to admin’ is closed to new replies.