-1

I've created a new metabox for Woocommerce products using the Meta Box plugin that takes in an event date using Datepicker.

I'm using the st-event_start_date metadata to show the date on a grid element on the front end (seen below):

enter image description here

Now, I want to store the date in another format so I can use it to filter posts by date. I've done some research on the altFormat and altField options in Datepicker docs and added them to my post js_options.

Unfortunately, this doesn't seem to work. What am I doing wrong? Will WordPress create a new metadata value when using altField?

Here's my current code that's placed in my child theme's function.php file:

// Add event details meta box to Woocommerce Products

function st_event_info( $meta_boxes ) {
$prefix = 'st-';

$meta_boxes[] = array(
    'id' => 'st_event_info',
    'title' => esc_html__( 'Event Info', 'skillthrive' ),
    'post_types' => array( 'product' ),
    'context' => 'advanced',
    'priority' => 'default',
    'autosave' => false,
    'fields' => array(
        array(
            'id' => $prefix . 'event_start_date',
            'type' => 'date',
            'name' => esc_html__( 'Event Start Date', 'skillthrive' ),
            'js_options' => array(
                'dateFormat' => 'M dd',
                'altField' => '.actualDate',
                'altFormat' => 'yy-mm-dd',
                'minDate' => '0',
            ),
        ),
        array(
            'id' => $prefix . 'event_start_time',
            'name' => esc_html__( 'Event Start Time', 'skillthrive' ),
            'type' => 'time',
            'js_options' => array(
                'timeFormat' => 'h:mm tt',
            ),
        ),
    ),
);

return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'st_event_info' );

echo do_shortcode( '[rwmb_meta meta_key="st_event_info"]' );
  • It's not quite clear what is the exact issue you are having. Is it with Meta Box, Datepicker, or WordPress core handling of meta? – Rarst Jun 30 '17 at 10:48
0

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:

enter image description here

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:

enter image description here

Exactly what I wanted!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.