Datepicker Custom Field

Overview

This Extra Field Type is available in WordPress Creation Kit Hobbyist or Pro. The Datepicker field allows a date to be selected via a JavaScript popup calendar.

Creating a Datepicker Field

To add a Datepicker Field to a previously created Custom Meta Box, under the Meta Box Fields tab simply insert a Field Title and under Field Type make sure you select Datepicker.

The Datepicker field contains options to customize it:

1. Description – Allows you to specify a description for the Datepicker Field
2. Required – Select whether the field is required or not
3. Default Value – Sets a default value for the Datepicker Field. Use the following format: dd-mm-yyyy
4. Date Format – The format of the datepicker date

Page, Post or Custom Post Type Edit Screen

This is how the Datepicker Field we created above looks like in the Edit Screen:

Template usage

The following examples are for a Custom Meta Box with the “Group Name” argument “my_meta_name“. Make sure to replace this with the “Group Name” you have set up. The Custom Meta Box below is setup to be attached to “Events” custom post type.

Using the WCK Custom Fields API

The Datepicker Field returns a string, in the following format: dd/mm/yyyy.

For a Single Meta Box

To output a value inside The Loop we use the function the_cfc_field():

Date: 

To assign the value to a variable we use the function get_cfc_field():

For a Repeater Meta Box

To output all the “Date” entries from the repeater field we use the functions get_cfc_meta() and the_cfc_field():

To output a specific “Date” entry from the repeater field (e.g. the second entry), we use the function the_cfc_field():

The index starts at 0 so that’s why we pass “1” to the function. For the first entry it would be “0”, the second is “1”, the third is “2” and so on…

Using the default WordPress functions

The Datepicker Field returns a string, in the following format: dd/mm/yyyy.

For a Single Meta Box

For a Repeater Meta Box

To output all the “Date” entries in the repeater field:

To output a specific “Date” entry from the repeater field (e.g. the second entry):

The index starts at 0 so that’s why we pass “1” to the function. For the first entry it would be “0”, the second is “1”, the third is “2” and so on…