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.

1 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.

  • Thanks for your help. Before posting my answer I tried with Simple Date Time Picker, but this module and the one you have mentioned let me change a content type field. But, because what I want is to change a form element of my own form, I don't know how to apply this kind of widget to this field. Do you know how could I do it?
    – briast
    Oct 28, 2018 at 21:37
  • Following your suggestions, I have added a time picker library to my module, and I have checked It is loaded, but I don't know how to attach this behavior to the time field. I tried to do $('#myedittime').timepicker(), but it doesn't work.
    – briast
    Oct 29, 2018 at 15:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.