WPSE Plugin Options Page

class.Wpse_Datepicker_Example.php

<?php
class Wpse_Datepicker_Example extends Wpse_Plugin_Options_Page
{
	protected $title     = 'jQuery Date Picker';
	protected $menu_slug = 'wpse_datepicker';
	protected $option    = 'wpse_datepicker';
	protected $scripts   = array ( 'jquery-ui-datepicker' );

	// not inherited
	public static function get_instance()
	{
		NULL === self::$instance and self::$instance = new self;
		return self::$instance;
	}

	public function render_page_content()
	{
		$value = esc_attr( get_option( $this->option ) );
		printf(
			'<p style="margin:100px auto;width:30em"><label for="%1$s">Pick a date
				<input type="text" id="%1$s" name="%2$s" value="%3$s" />
			</label> %4$s</p>',
			'datepicker',
			$this->option,
			$value,
			get_submit_button( 'Save', 'primary', 'submit', FALSE )
		);

		add_action(
			"admin_footer-$this->slug",
			array ( $this, 'print_footer_script' )
		);
	}

	public function enqueue_style()
	{
		wp_register_style(
			'jquery-ui-datepicker',
			'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css'
		);
		wp_enqueue_style( 'jquery-ui-datepicker' );
	}

	public function print_footer_script()
	{
		?>
<script>
jQuery( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
</script>
		<?php
	}

	protected function get_messages()
	{
		return array (
			1 => 'Date saved.'
		);
	}
}

class.Wpse_Plugin_Options_Page.php

<?php # -*- coding: utf-8 -*-
/**
 * Plugin Name: WPSE Plugin Options Page
 * Description: Sample options to test code
 * Version:     2013.04.28
 * Author:      Fuxia Scholz
 */

if ( is_admin() )
	add_action( 'wp_loaded', array ( Wpse_Datepicker_Example::get_instance(), 'wp_loaded' ) );
/**
 * Basic code, for a better documented example see
 * @link {https://github.com/toscho/T5-Admin-Menu-Demo}
 * @author toscho
 *
 * We do not use the so called Settings API here, because that is way too
 * complicated.
 * admin-post.php is used instead: simple, clean markup, works.
 */
class Wpse_Plugin_Options_Page
{
	protected static $instance = NULL;
	protected $slug      = '';
	protected $menu_slug = 'wpse_demo';
	protected $option    = 'wpse_option';
	protected $title     = 'WPSE Demo';
	protected $styles    = array();
	protected $scripts   = array();

	public static function get_instance()
	{
		NULL === self::$instance and self::$instance = new self;
		return self::$instance;
	}

	public function wp_loaded()
	{
		add_action(
			"admin_post_update_$this->option",
			array ( $this, 'admin_post' )
		);
		add_action(
			'admin_menu',
			array ( $this, 'admin_menu' )
		);
	}

	public function admin_menu()
	{
		$slug = add_options_page(
			$this->title,                       // page title
			$this->title,                       // menu title
			'manage_options',                   // capability
			$this->menu_slug,                   // menu slug
			array ( $this, 'render_page_base' ) // callback function
		);

		$this->slug = $slug;

		add_action( "admin_print_styles-$slug",  array ( $this, 'enqueue_style' ) );
		add_action( "admin_print_scripts-$slug", array ( $this, 'enqueue_script' ) );
		add_action( "page_content_$slug",        array ( $this, 'render_page_content' ) );
	}

	public function render_page_base()
	{
		$this->print_message();

		printf(
			'<div class="wrap"><h2>%1$s</h2><form method="post" action="%2$s">',
			$GLOBALS['title'],
			admin_url( 'admin-post.php' )
		);

		printf(
			'<input type="hidden" name="action" value="%s"/>',
			"update_$this->option"
		);
		wp_nonce_field( "update_$this->option" );

		do_action( 'page_content_' . $this->slug );

		print '</form></div>';
	}

	protected function print_message()
	{
		if ( ! isset ( $_GET['msg'] ) )
			return;

		$text = $this->get_message_text( $_GET['msg'] );

		if ( ! $text )
			return;

		print "<div id='message' class='updated fade'><p>$text</p></div>";
	}

	protected function get_message_text( $id )
	{
		$messages = $this->get_messages();

		if ( isset ( $messages[ $id ] ) )
			return $messages[ $id ];

		return FALSE;
	}

	protected function get_messages()
	{
		return array();
	}

	public function render_page_content()
	{
		echo $this->slug;
	}

	public function enqueue_style()
	{
		foreach ( $this->styles as $style )
			wp_enqueue_style( $style );

		do_action( 'base_styles_loaded_' . $this->slug );
	}

	public function enqueue_script()
	{
		foreach ( $this->scripts as $script )
			wp_enqueue_script( $script );

		do_action( 'base_scripts_loaded_' . $this->slug );
	}

	public function admin_post()
	{
		if ( ! check_admin_referer( "update_$this->option" ) )
			die( 'nope' );

		if ( ! isset ( $_POST[ $this->option ] ) )
			die( 'something is missing' );

		$msg = $this->save_option( $_POST[ $this->option ] );

		$url = add_query_arg( 'msg', $msg, $_POST[ '_wp_http_referer' ] );

		wp_safe_redirect( $url, 303 );
		exit;
	}

	protected function save_option( $data )
	{
		return (bool) update_option( $this->option, $data );
	}
}

desc.md

This is a simple demonstration showing how to use settings pages and jQuery libraries in WordPress.