Datepicker altField and altFormat to save a new meta key/value in a post?

I failed to mention that I’m using the Essential Grid plugin to make the grid elements. This plugin has the ability to use meta data from your theme or another plugin in the grid.

Therefore, I’m creating a grid that’s linked to a Custom Post Type, then I’m using meta from a custom meta box that I created with the Meta Box plugin from Metabox.io.

Now, my original issue was

1. How to sort by date (which is handled via the Essential Grid plugin)
2. Make sure the date is displayed in the format I wanted (e.g. JUN 23)

My solution was to save the meta in Unix timestamp format and then convert that to the format I want with jQuery.

Saving the date was as siple as adding ‘timestamp’ => true, in the field array for the custom meta box. This is also created for you if you’re using the Metabox.io generator for a data field by click the box next to “Timestamp.”

This took care of being able to sort the post based on this meta by adding the following to the “Additional Parameters” under “Source” for the Essential Grid element:

meta_key=live_start_date&orderby=meta_value_num&order=ASC

Here’s what the grid now looked like on my site:

Now, all I did to fix that format was to add the following jQuery under “API/Javascript” for the same Essential Grid:

jQuery(document).ready(function($) {
/* Change timestamp in Essential Grid to a date */
  $(".live_start_date").each(function() {
    var rawdata = $(this).html().replace("<span></span>", ""); // Grab timestamp and remove extra info
    var rawdate = new Date(rawdata * 1000); // Turn timestamp into date
    var days = ['Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
    var day = days[rawdate.getDay()]; // Get Day
    var date = rawdate.getDate(); // Get Date
    var month = months[rawdate.getMonth()]; // Get Month
    $(this).html(month + " " + date); // Rewrite timestamp as date in format "Mon 11"
  });
});

After doing that and saving the Essential Grid, this is what I got on my site:

Exactly what I wanted!