How to Add the jQuery UI Datepicker to the WordPress Admin

jquery-datepicker-wp-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' ) );