How to add a time picker in datetime form elements

Question

I have made a module that display a form. One of the form elements is a datetime field.

$form['FirstDate'] = array(
      '#type' => 'datetime',
      '#title' => t('First date-time'),
      '#id' => 'inputFechaMd',
      '#required' => TRUE,
      '#default_value' => '',
      '#prefix' => '<div class="row"> <div class="col-md-6">',
      '#suffix' => '</div>',
      '#attributes' => array('style' => array('margin-bottom: 1em;'))
    );

When the form is displayed It has two fields, one for date and one for time. The date field has a date picker, but the time field hasn't a time picker. I would like to add a time picker for this fields, but I don't know how to do it. Also, I would like to hide seconds and request only hour and minutes.

Answer 1

Your code renders a time type input for the second field, which will invoke the standard time widget for browsers that support it (most modern ones do).

For all browsers that I know of, that's a simple input mask and placeholders, not a dropdown picker like the date field. If you need such a picker, you'll have to find and integrate a JS library to get it.

You could do it yourself, but there's a contributed module, Datetime picker, which integrates 3 different time picker libraries so you can choose your favourite. If that doesn't give you exactly what you want, the code should at least give you a good starting point to implement your preferred solution.

In case you still need it, you can remove the seconds from the time input by setting #date_increment on the element to 60, which sets the step attribute on the element. That causes Chrome at least to only include placeholders for hours and minutes.