Format the date and time from custom meta fields

  • Resolved rinh

    (@rinh)


    4 months, 1 week ago

    Hi
    I’m not sure if this question would be better on Advanced Custom Fields forum, but it was not possible to register on their forum due to some spam protection. At the same time the issue doesn’t seem to be ACF so I’m reaching out here.

    I’m using two ACF custom fields: a date picker and a time picker. This has been working well in the past, however now I’m rebuilding my site with WordPress Full site editing, and using paragraph blocks to bind the date and time. To get the custom fields to show on the page I did the following PHP snippet. The one below is for date, but I have a similar for time as well.

    register_meta(
    'post',
    'start_date',
    array(
    'object_subtype' => 'event',
    'show_in_rest' => true,
    'single' => true,
    'type' => 'string',
    'sanitize_callback' => 'wp_strip_all_tags'
    )
    );

    And this snippet on the page itself and a similar one for time. It’s inside a paragraph block, but didn’t work to post the whole snippet here.

    {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"start_date"}}}}}

    It’s all working as it should, however the date format looks like this:
    20240715

    And the time format:
    19:00:00

    Is there anyway I can change the date and time format? It doesn’t help to change it within ACF.

    Thanks in advance!

Viewing 7 replies - 1 through 7 (of 7 total)

  • @rinh

    The date and time formats you’re seeing (20240715 for date and 19:00:00 for time) are likely the raw database formats being displayed. To format these values, we’ll need to modify how they’re output.

    # Modify the register_meta function:

    You could potentially modify the register_meta function to include a format_callback that formats the date before it’s returned to the REST API.

    Here is an example: 

    register_meta(
        'post',
        'start_date',
        array(
            'object_subtype' => 'event',
            'show_in_rest' => array(
                'schema' => array(
                    'format_callback' => function($meta_value, $meta_key, $object_type, $object_subtype, $field_args) {
                        return date('F j, Y', strtotime($meta_value));
                    },
                ),
            ),
            'single' => true,
            'type' => 'string',
            'sanitize_callback' => 'wp_strip_all_tags'
        )
    );

    Let me know ??

    Thread Starter rinh

    (@rinh)

    Thank you for the reply and the snippet! Unfortunately it still remains in the same date format ??

    @rinh apologies for the delay.

    If you’re using Full Site Editing and can’t easily modify the PHP, you could use JavaScript to format the date and time after the page loads. Here’s an example:

    <p class="date-display" data-date="20240715">20240715</p>
    <p class="time-display" data-time="19:00:00">19:00:00</p>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const dateElement = document.querySelector('.date-display');
        const timeElement = document.querySelector('.time-display');

        if (dateElement) {
            const date = new Date(dateElement.dataset.date);
            dateElement.textContent = date.toLocaleDateString();
        }

        if (timeElement) {
            const time = new Date(    1970-01-01T${timeElement.dataset.time});
            timeElement.textContent = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        }
    });
    </script>

    Let me know how it goes ??

    Thread Starter rinh

    (@rinh)

    Thanks for the reply! I use the code snippets plugin to for snippets of PHP. The problem for me when editing is rather that I do not know PHP.

    I’ll try out the script in a bit. I also found this, so perhaps it’s actually a bug within ACF? https://github.com/AdvancedCustomFields/acf/issues/673

    @rinh

    Seems like an ongoing issue with ACF.

    I found this: https://support.advancedcustomfields.com/forums/topic/datepicker-wrong-format-is-displaying/

    Thread Starter rinh

    (@rinh)

    Thanks for finding! That is a very old bug :/

    Thread Starter rinh

    (@rinh)

    I reached out to ACF support and I got help quick. I wasn’t doing this correctly. The solution is here for anyone else who might need it: https://www.advancedcustomfields.com/blog/acf-6-2-8/#block-bindings-api

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.