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' ) ); |
This comment has been minimized.
This comment has been minimized.
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: Thanks for posting! |
This comment has been minimized.
This comment has been minimized.
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
This comment has been minimized.
nice and clean! we're using nearly the same solution, only enqueueing styles+css together! thumbs up for using
$hook_suffix
.