WIP: Form Element - Isolating Time Picker Options from Date Field Not Working

Bugs
1

I’m encountering an issue while attempting to implement a time picker within a Bricks form. Since there doesn’t appear to be a dedicated time field, I’ve used the date field twice: one for the date and the second to function as a time picker.

Following the Bricks documentation on customizing form options, I tried to apply specific settings to the second date field (intended as the time picker). However, the custom options I applied are affecting both date fields, which is not the desired behavior.

To isolate the time picker, I added a name attribute, timePicker, to the second date field. I then examined the output of the bricks/element/form/datepicker_options filter to confirm that the timePicker field was recognized. The filter output is as follows:

array(8) {
    ["type"]=> string(10) "datepicker"
    ["label"]=> string(4) "Time"
    ["placeholder"]=> string(13) "Select a time"
    ["id"]=> string(6) "putwxl"
    ["required"]=> bool(true)
    ["width"]=> string(2) "49"
    ["name"]=> string(10) "timePicker"
    ["time"]=> bool(true)
}

I implemented the following PHP code to apply custom options specifically to the timePicker field:

<?php

add_filter('bricks/element/form/datepicker_options', function ($options, $element) {

    // Retrieve the form's fields
    $fields = isset($element->settings['fields']) ? $element->settings['fields'] : [];

    foreach ($fields as $field) {
        // Check if the field is a datepicker with the name 'timePicker'
        if (isset($field['type'], $field['name']) && $field['type'] === 'datepicker' && $field['name'] === 'timePicker') {
            // Apply custom options for time selection
            $options = [
                'enableTime' => true,
                'noCalendar' => true
            ];
            break; // Terminate the loop after finding the target field
        }
    }

    return $options;
}, 10, 2);

Despite targeting the timePicker field in the code, the custom options are still being applied to both date fields. This results in both fields displaying as time pickers, which is not the intended outcome.

CleanShot 2025-02-28 at 11 .27.12

Could you please assist me in isolating the time picker options so that they only affect the timePicker field and not the original date field?"

2

Hello @emmanuelson,

thank you for your report. We do already have a report/improvement about this, but it’s currently not possible to use that filter, to easily change Datepicker options for individual fields.

However, as a workaround, you can use something like this, just adapt it to your needs:

add_filter(
    'bricks/element/render_attributes', function ( $attributes, $key, $element ) {
        
        // Form element ID - Replace with your own
        if ($element->id !== 'jaydti' ) {
            return $attributes;
        }
  
        // Based on your field sequence, starts from 0
        if ($key !== 'field-1' ) {
            return $attributes;
        }
   
        $date_picker_options = isset($attributes[$key]['data-bricks-datepicker-options']) ? $attributes[$key]['data-bricks-datepicker-options'] : false;
    
        if (! $date_picker_options ) {
            return $attributes;
        }
  
        // Convert the string to array
        $date_picker_options = json_decode($date_picker_options[0], true);
        
        // Update options for second field (index 1)
        $date_picker_options['enableTime'] = true;
        $date_picker_options['time_24hr'] = true;
        $date_picker_options['dateFormat'] = 'Y-m-d H:i';
  
        // Convert the array back to string
        $attributes[$key]['data-bricks-datepicker-options'] = [ wp_json_encode($date_picker_options) ];
  
        return $attributes;
  
    }, 10, 3 
);

Hope this helps :slight_smile:

Matej