I love Pods. It makes building content management systems simple in WordPress, and I find it to be an invaluable plugin.
The Default Pods Date Picker
Of course, Pods is a rapidly developing plugin with a lot of ground to cover given its broad aims. Unfortunately, this means that some things haven’t been completely refined yet, and one of these minor deficiencies comes in the form of the Pods Date Picker. It looks like this:
It looks decent, and it does work. However, it’s not very user-friendly. The main issue is that clicking a date on the calendar is like clicking a “Set” button. Times won’t be set unless you also click the date button again. While a web designer will easily recognize this and work around it (hey, we can’t complain about minor details of free plugins that provide such robust functionality as Pods does), it may pose a bigger problem for average users: i.e. clients. Not to mention, they wonder why we need to deal with seconds (that should be optional), and a 60-option dropdown is a bit cumbersome.
I recently designed an application for a client using WordPress and the Pods CMS. They loved the system, but absolutely hated the Date Picker. What’s worse, in their determination, the Date Picker “didn’t work” (!) rather than was “hard to use”. The issue here is not that the default Pods Date Picker doesn’t work, but that it it doesn’t work the way the average user expects it to. For those with less patience with technology, the widget might as well not work at all.
So, I needed to replace the Pods Date Picker with a more user-friendly Date Picker. Unfortunately, this part of Pods is not easily extensible in the normal Wordpress fashion of using hooks (of course, you can override the entire Date field with an Input Helper, but I really just wanted to swap out the Date Picker widget rather than rewrite the entire field). It’d be great to have a pods_date_picker hook that allowed the removal of the current JS and addition of your own, but again, these are nice-to-have details that are less important than the current development of the CMS functionality.
Martin Milesich's Timepicker
First thing to do was to find a new Date Picker. After checking out a few, I settled on the jQuery-based Timepicker created by Martin Milesich. It extends the jQuery UI Datepicker, which is always a good thing to build on. It looks like this:
Here’s how I went about replacing the original Date Picker with the more user-friendly Timepicker:
1. Prepare a Javascript file within your theme
We’ll need a js file (let’s call it myadmin.js, which should be somewhere in your theme directory) that’s introduced in the admin section of WordPress. To do this you’ll need to include that file in the admin section of the site in your functions.php file. Something like this:
//this will only load the file in the administrative section of the site - //that is, the part that you have to log in to in order to see if (is_admin()){ //include admin files here (either js or php) }
To include a js file, you use wp_enqueue_script. This could be done right from functions.php or from an include admin-specific php file.
wp_enqueue_script('myadmin', 'path/to/my/theme/js/myadmin.js');
We also need to include the required jQuery scripts. First, download the Timepicker jQuery plugin and extract it into your theme somewhere. Then, include the scripts in functions.php or your custom admin php file.
function admin_head() { wp_enqueue_script('jquery'); //load jQuery wp_enqueue_script('jquery-ui-core'); //load jQuery UI Core (required for DatePicker) wp_enqueue_script('jq-datepicker', 'path/to/timepicker/js/jquery-ui-1.7.2.custom.min.js'); //The jQuery UI DatePicker (required for Timepicker) wp_enqueue_script('jquery-timepicker', 'path/to/timepicker/js/timepicker.js'); //The jQuery Timepicker extension that we'll be using wp_enqueue_style('jq-datepicker-style', 'path/to/timepicker/css/ui-lightness/jquery-ui-1.7.2.custom.css'); //CSS Styling for Timepicker wp_enqueue_script('myadmin', 'path/to/my/theme/js/myadmin.js'); //our script gets loaded last } if (is_admin()){ add_action('init', 'admin_head'); }
2. Kill the Old Date Picker
Again, if you’d like to get rid of the default Date Picker entirely, you can use a helper and override the entire Date field. This solution is quicker, but a bit of a hack. The only real downside I see is that we end up loading an extra javascript file that we don’t need (the default Date Picker’s js). On the site I’m creating, this is a non-issue.
As there’s no hook or simple way to remove the lines in pods/core/input_fields.php that includes the Date Picker code
/* Excerpt from pods/core/input_fields.php */
/*
==================================================
Date picker
==================================================
*/
elseif ('date' == $coltype)
{
if (empty($coltype_exists[$coltype]))
{
?>
<script type="text/javascript" src="<?php echo PODS_URL; ?>/js/date_input.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery(".pods_form input.date").date_input();
});
</script>
<?php
}
$value = empty($value) ? date("Y-m-d H:i:s") : $value;
?>
<input type="text" class="<?php echo $css_classes; ?>" id="<?php echo $css_id; ?>" value="<?php echo $value; ?>" />
<?php
}we’ll just override the date_input function:
/* Goes in myadmin.js */ $.fn.date_input = function(){return;}
That’ll kill the old Date Picker. Why not just delete the lines from pods/core/input_fields.php? Because next time we update the Pods plugin, we’ll have to do this all over again.
3. Insert the new Timepicker
This code is taken from the timepicker site and only updated slightly:
/* Goes in myadmin.js */ $('.pods_form input.date').datepicker({ duration: '', showTime: true, constrainInput: false, stepMinutes: 5, stepHours: 1, altTimeField: '', time24h: false, dateFormat: 'yy-mm-dd' });
The important change here is the dateFormat parameter. The default date format won’t conform with the date format expected by the Pods engine. This takes care of reformatting the date correctly, but we still need to change the time to military time to get this right.
4. Convert to expected military time
The Timepicker prints times in the form hh:mm am/pm, but Pods expects a 24 hour (military) time. I still want my users to be able to see AM/PM in the Timepicker, otherwise I think I could just change the time24h option to “true” and be done with it. Instead, we need to override or change the Timepicker’s update() method like this:
update: function (fd) { var hours = $('#' + this._mainDivId + ' span.fragHours').text(); //get the hours var mins = $('#' + this._mainDivId + ' span.fragMinutes').text(); //get the minutes if (!this._time24h) { //if we're in the pm, add 12 to the hours if($('#' + this._mainDivId + ' span.fragAmpm').text() == 'pm') hours = ((1*hours)+12); } //set the curTime in the right format (no am/pm) var curTime = hours + ':' + mins + ':00'; //the rest remains the same var curDate = $('#' + this._inputId).val(); $('#' + this._inputId).val(fd + ' ' + curTime); if (this._altTimeField) { $(this._altTimeField).each(function() { $(this).val(curTime); }); } },
5. Put it all together and what do you got?
That’s it! In the end we’ve touched 3 files:
1. functions.php
(Load the administrative js file and the required jquery files)
/*functions.php*/ function admin_head() { wp_enqueue_script('jquery'); //load jQuery wp_enqueue_script('jquery-ui-core'); //load jQuery UI Core (required for DatePicker) wp_enqueue_script('jq-datepicker', 'path/to/timepicker/js/jquery-ui-1.7.2.custom.min.js'); //The jQuery UI DatePicker (required for Timepicker) wp_enqueue_script('jquery-timepicker', 'path/to/timepicker/js/timepicker.js'); //The jQuery Timepicker extension that we'll be using wp_enqueue_style('jq-datepicker-style', 'path/to/timepicker/css/ui-lightness/jquery-ui-1.7.2.custom.css'); //CSS Styling for Timepicker wp_enqueue_script('myadmin', 'path/to/my/theme/js/myadmin.js'); //our script gets loaded last } if (is_admin()){ add_action('init', 'admin_head'); }
2. myadmin.js
(Remove the default Date Picker and add the Timepicker)
jQuery(document).ready(function($){ /** DATE PICKER */ $.fn.date_input = function(){return;} //remove old Date Picker $('.pods_form input.date').datepicker({ //add Timepicker duration: '', showTime: true, constrainInput: false, stepMinutes: 5, stepHours: 1, altTimeField: '', time24h: false, dateFormat: 'yy-mm-dd' }); });
3. timepicker.js (or an overriding function file)
(Override the Timepicker’s default time settings)
//Timepicker.prototype = {.... update: function (fd) { var hours = $('#' + this._mainDivId + ' span.fragHours').text(); var mins = $('#' + this._mainDivId + ' span.fragMinutes').text(); if (!this._time24h) { if($('#' + this._mainDivId + ' span.fragAmpm').text() == 'pm') hours = ((1*hours)+12); } var curTime = hours + ':' + mins + ':00'; var curDate = $('#' + this._inputId).val(); $('#' + this._inputId).val(fd + ' ' + curTime); if (this._altTimeField) { $(this._altTimeField).each(function() { $(this).val(curTime); }); } },
That’s it! Now the Date Picker has a much more user-friendly interface. Clients happy. Awesome.
