Create a gist now

Instantly share code, notes, and snippets.

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' ) );

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

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!

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