Just like we saw with jQuery and ThickBox in the previous recipes, WordPress comes bundled with many jQuery libraries. Two of these libraries, jQuery UI and jQuery UI Datepicker, can be used to display a pop-up calendar and associate it with a text field on a form. That being said, the distribution of these scripts is missing the associated stylesheet and images that are required to display a fully rendered calendar.

This recipe starts by visiting the jQuery UI website and downloading a copy of the complete library, which includes all the required layout files. Once the download is complete, we are only interested in getting a copy of the style data, since all the other necessary scripts are provided by WordPress. After registering a function with admin_enqueue_scripts, we make three function calls to load the required JavaScript files in the admin page header. We also make a call to load the stylesheet that we just downloaded. When copying files from the downloaded archive, we selected the minified versions of the CSS files to have the smallest versions available.

The wp_enqueue_style function has many parameters. In this example, we are providing values for the first four of them to indicate the name of the style, the path to the style file, an empty list of dependencies, and a version number. This function also has a fifth parameter, which we are not using here, to indicate if the script should be loaded in the header or footer, where the default is the header.

Once all of the required scripts are in place, the remainder of the code creates a meta box in the post editor, displays a text field in that box, and outputs JavaScript code that will be called when the page is completely rendered to associate the pop-up calendar with the text field. As part of the calendar's options, we specify that the user will only be able to select future dates with the minDate parameter along with the desired date format.