Cmb2: `text_time` field does not allow for 00 to 59 minutes selection - skips every 5

[1cgonza]

Expected Behavior:

When using the text_time field with time formats that include i = i Minutes with leading zeros 00 to 59, I would like to be able to select any number from 00 to 59. This happens only with minutes i, but not with seconds s.

Actual Behavior:

What I see is a select field that shows minutes from 0 to 55, skipping every 5 minutes. The dropdown shows 00, 05, 10, 15...

If I type in directly any number that is not divisible by 5, the minutes value jump back to 00.

Steps to reproduce:

1. Add the field text_time.
2. For the time_format, use either the default h:i:s A or any variation that uses i.

CMB2 Configuration

<?php
function register_mb() {
  $prefix = '_rr_';

  $meta = new_cmb2_box(array(
    'id'           => $prefix . 'meta',
    'title'        => 'Datos',
    'object_types' => array('proyecto'),
    'context'      => 'normal',
    'priority'     => 'high',
    'show_names'   => true
  ));

  $meta->add_field(array(
    'id'   => $prefix . 'duracion',
    'name' => 'Duración',
    'desc' => '',
    'type' => 'text_time',
    'time_format' => 'H:i:s'
  ));
}

add_action('cmb2_admin_init', 'register_mb');

[tw2113]

Sorry for the delay in response here @1cgonza . Can you please provide the CMB2 configuration that you're using here, for maximum reproducability in this case?

[1cgonza]

@tw2113 I've edited the comment to include the CMB2 configuration. Thanks in advance!

[tw2113]

Looks like we set 5 to be the step increment by default for the timepicker. That said, we do have a filter on this for use and changing. You can see the filter in place at https://github.com/WebDevStudios/CMB2/blob/v2.2.3.1/includes/CMB2_JS.php#L161

The stepMinute spot is set at https://github.com/WebDevStudios/CMB2/blob/v2.2.3.1/includes/CMB2_JS.php#L147

The quick filter/callback below should help get that changed to showing every minute.

function cgonza_alter_cmb2_timepicker( $l10n ) {
    $l10n['defaults']['time_picker']['stepMinute'] = 1;

    return $l10n;
}
add_filter( 'cmb2_localized_data', 'cgonza_alter_cmb2_timepicker' );

[1cgonza]

@tw2113 Yes! that works, thanks for all the details and clear solution.

[tw2113]

Welcome :)

[jtsternberg]

It's actually better to do this at the field level (which you can do with data attributes) than with filter, as the filter will alter ALL fields using CMB2, and may affect other plugins, etc. To do the same at the field-level:

$meta->add_field( array(
    'id'          => $prefix . 'duracion',
    'name'        => 'Duración',
    'type'        => 'text_time',
    'time_format' => 'H:i:s'
    'attributes' => array(
        'data-timepicker' => json_encode( array(
            'stepMinute' => 1,
        ) ),
    ),
) );

[tw2113]

Very interesting and good to know, @jtsternberg Definitely makes sense to change this per-field instead of globally.

[jtsternberg]

Just FYI, Any of the "pickers" (date, time, color) can override the JS parameters in this way.

[1cgonza]

@jtsternberg I really appreciate your answer.

One thing I noticed is that once I set the attributes in this way, the ones that should be set by CMB2 seem to get overwritten. Instead of getting an input with the attribute data-timepicker="{"stepMinute":1,"timeFormat":"HH:mm:ss"}" I get data-timepicker="{"stepMinute":1}".

So in my case, I was not able to see the seconds field anymore. What ended up working for me was to set the timeFormat again as an attribute, since the option 'time_format' => 'H:i:s' was not applied anymore in the attributes.

I like this way of solving the issue since I don't have to set a global filter, but it is unfortunate that I have to set the time format twice:

$meta->add_field( array(
    'id'          => $prefix . 'duracion',
    'name'        => 'Duración',
    'type'        => 'text_time',
    'time_format' => 'H:i:s', // I still need this so it gets properly formated in the input
    'attributes' => array(
      'data-timepicker' => json_encode( array(
            'stepMinute' => 1,
            'timeFormat' => 'HH:mm:ss'
      ) ),
    ),
) );

[jtsternberg]

Ah, that's interesting, I thought it would merge the 2, but appears to not be the case.