Separate day, month, year from Date Picker to css style separately

• imonline

• December 27, 2017 at 6:47 pm

Hi guys,

I’m using Date Picker for event dates. I need to separate day, month and year to style them separately to have post grid look something like this:

http://www.motogp.com/en/calendar/

My problem is that my client does not want me to modify any core WP, theme or plugin core files and doesn’t want me to use the theme’s child theme either. I can only use plugins (free or paid) to help me solve this problem.

I’m using “The7” wordpress theme and it includes custom CSS and Javascript fields so that’s all I can use.

I’m also using WPBakery Page Builder (Visual Composer) Grid Builder to create the post grid similar to the one shown above in the http://www.motogp.com/en/calendar/ link and it includes ACF and Custom Field elements. My only problem is that I can’t style the day and month separately.

Some ideas I’ve had but don’t know how to accomplish are:

1) When saving a post and obviously chosing a date using Date Picker, find a way to have the date day and month separated and saved to new number (for day) and text (for month) custom fields for that same post. Then I can get the custom fields in the VC Grid Builder to style these custom fields. But I have not found a plugin to make this happen while saving the post.

2) Using the themes custom javascript field, find a way to separate day and month and create a shortcode or any other way I could use in VC Grid Builders Text Block, ACF or Custom Field element to use the separated fields.

3) Find a plugin that already does what I need, as part of the solution or the complete solution.

4) Any of your ideas are welcome.

Thanks guys!

Sergio

• John Huebner

• December 29, 2017 at 3:54 am

I’m a little confused. How are you displaying ACF fields at all without modifying the theme. Are you already using some type of plugin for this or are you just using the built in ACF shortcode for simple fields.

1 is not possible unless you can modify code in the theme to add a filter.

2 is possible, using jQuery you could get displayed value. But that would depend on how specific the markup is set up so you can get the values. Then you could use some string manipulation to add some additional elements and style these.

3 I doubt this exists

• imonline

• December 29, 2017 at 1:05 pm

Hi John,

Thanks for your reply.

When you install ACF WP Plugin where WPBakery Page Builder (Visual Composer) https://wpbakery.com/features/content-elements/ Plugin is also installed, it adds an ACF fields element that allows to display fields anywhere in pages, posts or any post type:

VC plugin also includes a post grid builder that also includes the ACF element and that I would use to display ACF fields in the post grids.

Regarding your reply to question 1), I convinced my client to use a child theme, so now I can add functions to the functions.php theme file. Do you think using the child theme of the parent theme we can add the proper functions or code to separate the Date Picker field into a new number (for day) and text (for month) custom fields for that same post?

If yes, do you know how?

• John Huebner

• December 30, 2017 at 1:48 am

You can use either an acf/save_post filter https://www.advancedcustomfields.com/resources/acf-save_post/ or an update value filter for the specific field https://www.advancedcustomfields.com/resources/acf-update_value/

In this filter, depending on which one you use, you would get the value or the field and then split it where you want, or figure out what values to save and then store the value into several post_meta fields. These fields would be separate from ACF, basic WP custom meta. And you would use standard WP functions for setting and getting these values, add_post_meta(), get_post_meta(), etc… or in your case, I guess you would specify these fields in the other plugin you’re using to display them where you want.

Glad you convinced them to use a child theme, there isn’t any case where this is a bad idea.