Advanced Custom field datepicker data giving errors when used within custom wordpress post loop

Question

I have custom wordpress front page where i want to show event dates in this format but here only post date shows..i want to replace it event date in the same format

here is my front page code

here is event post admin page

here is the advanced customfield page where i added events_field metabox field to show under each event post texteditor in admin

event loop before adding acf field

<?php
        
            $events = new WP_Query( array(
             'post_type' => 'event',
             'posts_per_page' => 2
            ));
            
            while($events->have_posts()){
                $events->the_post();
        ?>
          <div class="event-summary">
            <a class="event-summary__date t-center" href="#">
              <span class="event-summary__month"><?php the_time('M');?></span>
              <span class="event-summary__day"><?php the_time('d');?></span>
            </a>
            <div class="event-summary__content">
              <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h5>
              <p><?php echo wp_trim_words(get_the_excerpt(),15);?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
            </div>
          </div>
          <?php } wp_reset_postdata(); ?>

problem is after i add advanced custom field name inside php DateTime object it shows error

event loop after adding acf field

<?php
        
            $events = new WP_Query( array(
             'post_type' => 'event',
             'posts_per_page' => 2
            ));
            
            while($events->have_posts()){
                $events->the_post();
        ?>
          <div class="event-summary">
            <a class="event-summary__date t-center" href="#">
              <span class="event-summary__month"><?php the_field('event_date');
               // $eventDate  = new DateTime(get_field('event_date'));
               // echo $eventDate->format('M');        
              ?></span>
              <span class="event-summary__day"><?php the_time('d');?></span>
            </a>
            <div class="event-summary__content">
              <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h5>
              <p><?php echo wp_trim_words(get_the_excerpt(),15);?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
            </div>
          </div>
          <?php } wp_reset_postdata(); ?>

this is the error i see

how ever if i just add this code within loop it shows the full date years months as put in acf field

the_field('event_date');

see screenshot

however i need to change the date format to match the theme like the first screenshot image i posted

after using EPB solution it works but only shows month number instead i need to show first three letters of month like JUN ,JUL

here is the current screenshot after using EPB code

and here is the new events loop code after using EPB solution

 <?php
        
            $events = new WP_Query( array(
             'post_type' => 'event',
             'posts_per_page' => 2
            ));
            
            while($events->have_posts()){
                $events->the_post();
        ?>
          <div class="event-summary">
            <a class="event-summary__date t-center" href="#">
              <span class="event-summary__month"><?php
     $date_string = get_field('event_date');
     $eventDate = DateTime::createFromFormat('d/m/Y', $date_string);
      echo $eventDate->format('m');
         ?></span>
              <span class="event-summary__day"><?php the_time('d');?></span>
            </a>
            <div class="event-summary__content">
              <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h5>
              <p><?php echo wp_trim_words(get_the_excerpt(),15);?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
            </div>
          </div>
          <?php } wp_reset_postdata(); ?>

any help will be appreciated,thanks

Answer 1

thanks everyone i go this solved

here is the code

 <?php
            $today = date('Ymd');
            $events = new WP_Query( array(
             'post_type' => 'event',
             'posts_per_page' => 2,
             'meta_key'=> 'event_date',
             'orderby' =>'meta_value_num',
             'order'=>'ASC',
             'meta_query'=> array(
              array(
              'key'=>'event_date',
              'compare'=>'>=',
              'value'=>$today,
              'type'=>'numeric'
              )
             )
            ));
            
            while($events->have_posts()){
                $events->the_post();
        ?>
          <div class="event-summary">
            <a class="event-summary__date t-center" href="#">
              <span class="event-summary__month"><?php
     $date_string = get_field('event_date');
     $eventDate = DateTime::createFromFormat('d/m/Y', $date_string);
      echo $eventDate->format('M');
            
             ?></span>
              <span class="event-summary__day"><?php  echo $eventDate->format('d');?></span>
            </a>
            <div class="event-summary__content">
              <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h5>
              <p><?php echo wp_trim_words(get_the_excerpt(),15);?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
            </div>
          </div>
          <?php } wp_reset_postdata(); ?>

Answer 2

The problem is the date format you're using. That date format is ambiguous, so DateTime is failing to parse it correctly.

You could just change it to ISO format with preg_replace and use that when constructing your DateTime object. For example:

$iso = preg_replace('/([\d]{2})\/([\d]{2})\/([\d]{4})/', '$3-$2-$1', get_field('event_date'));
$dt = new DateTime($iso);

Edit: Or, better yet, use the DateTime::createFromFormat method format that let's you explicitly state the input format.

$dt = DateTime::createFromFormat('d/m/Y', get_field('event_date'));