Using Advanced Custom Fields: Date and Time Picker Field

Let’s say that you have a website but what if you wanted a date and time picker to show events or announcements? Thankfully, Advanced Custom Fields has an addon just for that purpose.

Step 1: Install and Activate the Addon

The first step is to install and activate the plugin. You can download the plugin here. You can then use an FTP program to upload the unizpped folder to your /wp-content/plugins directory.

Step 2: Creating the Field

Let’s create a date and time picker field! There should be a Custom Fields button in your admin bar:

You should see this menu after activating the plugin

Click on the Custom Fields button and you should be able to see the Field Groups screen. Click on the Add New button:

You will see this screen after clicking the 'Advanced Custom Fields' menu item.

You will need to enter a new in order to add a new Field Group:

You should input the field name here

Then click on the Add Field button create a new field and select the options below:

You will need to use this screen in order to create a new date and time picker field

  1. Database Format: You can define the format for the date and time that will be saved to the database
  2. Display Format: This is how the date will be shown on your blog post / page.

After you have defined your options, just click on the Publish button to save the new field:

Click on the publish button to save your field.

In Your Post

In your post editor, if you scroll down, you should now be able to see a new field. Just click on the new field and a calendar should appear.

Just pick a date from the calendar and everything is ready to go




The Code

The last step is to add the code to your single.php and/or page.php template files. All you will need to do is add this to the loop:

<?php the_field('date_and_time'); ?>

You can also use:

<?php echo get_field('date_and_time'); ?>

The date/time should now be displayed on the blog page like this:

You should now be able to see the date in your post

If you have any questions, please leave a comment below.