Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

commented May 5, 2017

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

@arkodevo

This comment has been minimized.

Copy link

commented May 23, 2017

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

This comment has been minimized.

Copy link
Owner Author

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
You can’t perform that action at this time.