Practical WordPress Development

How To Include The jQuery Datepicker in WordPress

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

jQuer 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:

  1. Preparing The Plugin
  2. Save The Date

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.



    Thanks, those two articles are very helpful…

  2. Frank

    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.

  3. dileep

    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



    function hs_load_script()
    wp_enqueue_style(‘jquery-style’, ‘’);

    //wp_enqueue_style('jquery-ui-css', '');

    /*jQuery(document).ready(function($) {
    dateFormat : 'yy-mm-dd'

    jQuery(document).ready(function() {
    dateFormat : 'dd-mm-yy'

    From Date:<input type="date" id="custom_date" value="">
    To Date:<input type="date" class="custom_date" value="">

    • Tom


      Unfortunately, this isn’t the kind of blog that is geared towards helping with programming problems like this.

      All the best!

Leave a Reply

© 2020 Tom McFarlin

Theme by Anders NorenUp ↑