Meta boxes

Create a meta box with a date picker in WordPress

With WordPress, meta boxes with date pickers are commonly used with custom post types, for example, to store the date of an event, the release date of a product, the birth date of a person, and more.

This article, which targets both developers and WordPress beginners, will explore different methods to create a meta box with a date picker.

Create a custom plugin

The first part of the tutorial will cover creating a meta box with a date picker with a custom WordPress plugin. However, most of the code available in this tutorial will also work in the functions.php file of a theme.

Define the meta box

The first step is to create the meta box with the add_meta_box() function. This function should be placed inside a callback of the add_meta_boxes hook. If you are new to this subject, check out the Custom Meta Boxes guide for developers on WordPress.org.

The implementation below defines a meta box named “Meta Box with Datepicker” displayed only in the “post” post type.

function add_custom_meta_box() {
	add_meta_box(
		'meta_box_datepicker_example', // Unique ID
		'Meta Box with Datepicker',    // Meta Box title
		'meta_box_datepicker_html',    // Callback function
		'post'                         // The selected post type
	);
}

add_action( 'add_meta_boxes', 'add_custom_meta_box' );

Create the metabox HTML

The meta_box_datepicker_html() callback function referenced in the meta box definition echos the HTML of the meta box fields. Specifically, it generates an input field with its label.

In this context, you will create the date picker by defining an input element of type date. With this particular input field, the browser generates a UI that lets the user select the date.

It’s worth noting that all the major browsers now support this type of date picker. More information on the exact support across browsers is available on this support table.

function meta_box_datepicker_html( $post ) {

	$custom_date = get_post_meta( $post->ID, '_custom_date_meta_key', true );

	?>

	<label for="custom_date">Custom date</label>
	<input name="custom_date" type="date" value="<?php echo esc_attr($custom_date); ?>">

    <?php

}

Your meta box now includes a new field with a date picker.

Note that the date entered by the user is retrieved with get_post_meta. This meta data will be saved in the save script explained in the next section.

Save the post meta

To save the date entered by the user, you must create a callback function attached to the save_post hook. In this function, simply check the existence of the custom_date key in the $_POST global variable. If this key exists, save its value in a post meta.

function meta_box_datepicker_save( $post_id ) {
   if ( array_key_exists( 'custom_date', $_POST ) ) {
      update_post_meta(
         $post_id,
         '_custom_date_meta_key',
         $_POST['custom_date']
      );
   }
}

add_action( 'save_post', 'meta_box_datepicker_save' );

WordPress can now save the meta box value. Your meta box with the date picker is now fully functional.

Pros and cons of using the browser native date picker

Using the native browser date picker has many advantages:

  • There is no need for a dedicated date picker library.
  • You load fewer resources and make the page loading faster.
  • Date picker variations are available using these alternative attribute values: time, datetime-local, month, and week.

However, there are also problems with this technique:

  • The exact aspect and behavior of the UI depend on the browser, and it’s not customizable.
  • Older browsers don’t generate the date picker UI.

Considering this, in the next part of the tutorial, you will find how to create a meta box with a date picker using a specialized JavaScript library.

Create the date picker with a JavaScript library

https://daext.com/blog/create-a-meta-box-with-a-date-picker-in-wordpress/