Date

Description

The date field type creates a single-line input field in the admin panel, designed for selecting or entering dates. It is rendered as an HTML <input type="date"> element styled with Bootstrap’s form-control class, typically providing a native browser date picker. This field is ideal for capturing dates such as event schedules, deadlines, or publication dates.

Available Options

Parameter Type Description Required Default
name String The name of the field, used as the identifier and default label if label is not provided. Yes –
type String The field type. Must be set to date. Yes –
label String The display label for the date field. If not provided, the name is used. No name
placeholder String A hint displayed in the field when it is empty, guiding the user on expected input. No name
default String/Boolean The default date value in YYYY-MM-DD format (e.g., 2025-04-12). If set to false, the field will be empty by default. No false
class String Additional CSS classes to apply to the date input for custom styling or JavaScript targeting. No –
help String A help message displayed in a sidebar or tooltip when the user clicks the info icon next to the field. No –
required Boolean If true, the field is marked as required, adding the HTML required attribute. No false


Note: The date field is stored in the settings array as a sanitized string in YYYY-MM-DD format, using WordPress’s sanitize_text_field function. Invalid date formats may result in an empty string.

Example

Below is an example of how to define a date field in the $fields array for the Reusable Admin Panel settings class.

$this->fields = array(
    'general' => array(
        array(
            'name'    => __('Event Date', 'your-plugin-slug'),
            'type'    => 'date',
            'label'   => __('Event Date', 'your-plugin-slug'),
            'default' => '2025-04-12',
            'class'   => 'event-date-input',
            'help'    => __('Select the date of the event (within 2025).', 'your-plugin-slug'),
            'required' => true
        )
    )
);

This configuration will create a date field labeled “Event Date” under the “general” section. It will default to 2025-04-12, include the CSS class event-date-input, display a help message, and be marked as required.

Usage Notes

  • The date field uses WordPress’s sanitize_text_field for sanitization, ensuring the input is a safe string. Developers should validate the YYYY-MM-DD format server-side if critical.
  • The field’s ID is automatically generated as {section}-{name}, where name is sanitized using sanitize_title.
  • The field is styled using Bootstrap’s form-control class. Custom styles can be applied via the class parameter.
  • The required attribute ensures a date is selected, triggering browser validation.
  • The type="date" attribute enables native browser date pickers on supported devices, falling back to a text input on others.
  • To retrieve the value of a date field, use the get_option method, e.g., $this->get_option('general', 'event-date').