Skip to content

Instantly share code, notes, and snippets.

@slushman
Last active October 19, 2022 14:25
Show Gist options
  • Save slushman/8fd9e1cc8161c395ec5b to your computer and use it in GitHub Desktop.
Save slushman/8fd9e1cc8161c395ec5b to your computer and use it in GitHub Desktop.
How to Add the jQuery UI Datepicker to the WordPress Admin
/**
* Adds the datepicker settings to the admin footer.
* Only loads on the plugin-name settings page
*/
function admin_footer() {
$screen = get_current_screen();
if ( $screen->id == 'settings_page_plugin-name' ) {
?><script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.datepicker').datepicker({
dateFormat : 'D, m/d/yy'
});
});
</script><?php
}
} // admin_footer()
add_action( 'admin_print_scripts', array( $this, 'admin_footer' ), 1000 );
/**
* Enqueues the built-in Datepicker script
* Only loads on the plugin-name settings page
*/
function enqueue_scripts( $hook_suffix ) {
$screen = get_current_screen();
if ( $screen->id == $hook_suffix ) {
wp_enqueue_script( 'jquery-ui-datepicker' );
}
} // enqueue_scripts()
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
/**
* Enqueues a Datepicker theme
* Only loads on the plugin-name settings page
*/
function enqueue_styles( $hook_suffix ) {
$screen = get_current_screen();
if ( $screen->id == $hook_suffix ) {
wp_enqueue_style( 'jquery.ui.theme', plugin_dir_url( __FILE__ ) . '/css/datepicker.css', array( 'jquery-ui-core', 'jquery-ui-datepicker' ), $this->version, 'all' );
}
} // enqueue_styles()
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_styles' ) );
@wp-entwickler-at
Copy link

nice and clean! we're using nearly the same solution, only enqueueing styles+css together! thumbs up for using $hook_suffix.

@arkodevo
Copy link

There's one paren out of place that is causing an error for me. It doesn't appear there should be a paren after the stylesheet path:
.... '/css/datepicker.css' ), array( ...
.... '/css/datepicker.css', array( ...

Thanks for posting!

@slushman
Copy link
Author

slushman commented Jan 5, 2018

Great catch, @arkodevo! Thanks for the correction.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment