Time

Description

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

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 time. Yes –
label String The display label for the time field. If not provided, the name is used. No name
description String Display a description below the label. No ā€“
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 time value in HH:MM 24-hour format (e.g., 14:30). If set to false, the field will be empty by default. No false
class String Additional CSS classes to apply to the time 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 time field is stored in the settings array as a sanitized string in HH:MM format, using WordPress’s sanitize_text_field function. Invalid time formats may result in an empty string.

Example

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

$this->fields = array(
    'general' => array(
        array(
            'name'        => __('Start Time', 'your-plugin-slug'),
            'type'        => 'time',
            'label'       => __('Event Start Time', 'your-plugin-slug'),
            'description' => __('Select start time.', 'your-plugin-slug'),
            'default'     => '09:00',
            'class'       => 'start-time-input',
            'help'        => __('Select the start time for the event.', 'your-plugin-slug'),
            'required'    => true
        )
    )
);

This configuration will create a time field labeled “Event Start Time” under the “general” section. It will default to 09:00, include the CSS class start-time-input, display a help message, and be marked as required.

Usage Notes

  • The time field uses WordPress’s sanitize_text_field for sanitization, ensuring the input is a safe string. Developers should validate the HH:MM 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 time is selected, triggering browser validation.
  • The type="time" attribute enables native browser time pickers on supported devices, falling back to a text input on others.
  • To retrieve the value of a time field, use the get_option method, e.g., $this->get_option('general', 'start-time').