In the first quarter of this year, I’ve been working on two client projects both of which have called specifically for incorporating advanced date management into various aspects of WordPress.
Because of various formats, user error, and so on can make working with dates a bit difficult, I’ve always been partial to working with date pickers to make date selection and management a bit easier.
And since WordPress includes both jQuery and jQuery UI, I tend to use the features that are included rather than introducing yet-another-library.
In my latest series on WPTuts+, I walk through the process of how to incorporating the jQuery datepicker in WordPress.
The jQuery Datepicker in WordPress
Generally speaking, the series walks through the process of creating a simple plugin that implements the default date picker into a meta box.
The series consists of two articles:
And throughout the two articles, I walk through the process of building a plugin from the ground up covering everything from preparing the plugin to preparing the plugin for release.
Preparing The Plugin covers:
- Stubbing Out The Plugin
- Creating The Meta Box
- Saving The Meta Data
Save The Date covers:
- Implementing The Datepicker
- Saving The Date
- Displaying The Date on The Post
- Preparing The Plugin For Release
The plugin that’s developed during the course of the series is also available on GitHub for review, pull requests, and downloads, so be sure to check it out.
A Word About The Datepicker
Out-of-the-box, the jQuery Datepicker is functionality and looks good enough, but it’s highly customizable both through its API and through stylesheets.
I bring this up because the plugin is convenient in that it’s already included in WordPress, but it may leave something to be desired for those of you looking to create tighter integration with your design or the look and feel of your theme.
To that end, I recommend checking out the Datepicker’s API documentation to see what all is possible with it.
5 Comments
Thanks, those two articles are very helpful…
Glad to hear it!
Fine source and tutorial, but a small advice from my side. You load also a translation file, but no alternative languages files for the datepicker, are extra js files and the inlcude is a god point for hints for developers to create a plugin, there is ready for more as one language.
Best
hi
i have to develop like datepicker plugin in by using this sortcode i have to show the datepicker in front end not for posts and pages
register_activation_hook(FILE,’hs-activate-booking-engine’);
register_deactivation_hook(FILE,’hs-deactivation-booking-engine’);
add_action(‘init’,’hs_load_script’);
function hs_load_script()
{
wp_enqueue_script(‘jquery’,’http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js’);
wp_enqueue_script(‘jquery-ui-datepicker’);
wp_enqueue_style(‘jquery-style’, ‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css’);
//wp_enqueue_script('jquery-ui-datepicker');//wp_enqueue_style('jquery-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
?>
/*jQuery(document).ready(function($) {
$('#custom_date').datepicker({
dateFormat : 'yy-mm-dd'
});
});*/
jQuery(document).ready(function() {
jQuery('#MyDate').datepicker({
dateFormat : 'dd-mm-yy'
});
});
From Date:<input type="date" id="custom_date" value="">
To Date:<input type="date" class="custom_date" value="">
Heya,
Unfortunately, this isn’t the kind of blog that is geared towards helping with programming problems like this.
All the best!