How do I remove or hide seconds in the Drupal 8 time picker?


The widgets for timestamps, datetime, and daterange fields is the HTML5 input elements. For time, the format for these has to be 'H:i:s', which includes the seconds. The form element also defaults to using the HTML5 inputs, too, in custom uses.

For fields, you would need to form alter the widget to change the 'date_time_element' key 'text' fields and update the '#date_time_format' key to the format you want. Then, you may need to update the submitted value to set the seconds to 00, since I believe they will default to the current value of the seconds.

For form elements, just use a 'text' element for '#date_time_element' and pick a format that you want.

  • thanks for the answer - I would really like to keep the timepicker, and if I alter the form element to text I lose that. Anyway to override the JS to exclude the seconds? I've tried implementing this patch: drupal.org/node/1838234, but as far as I can tell I am still stuck with seconds and am unable to alter the jquery timepicker to use different formats. – Morten Nov 1 '17 at 22:11
  • @Morten Since the browser itself is doing that, there isn't a portable way. I haven't looked at that patch in a while (I wrote one of the iterations of it), but you should be able to take that approach and put it in your own module or theme and set the format as you wish. But remember that patch currently is a polyfill, so it won't be used unless you are on a non HTML5-input aware browser. So, even with the patch you will still see the browser timepicker on Chrome, Edge, and a few others. You will have to do the form-alter + edit the patch a bit. – mpdonadio Nov 1 '17 at 22:18
  • thanks a lot for all your help. I finally managed to make it work. Steps: 1. Apply the patch from drupal.org/node/1838234 . 2. Form alter to change default values and default format. 3. Custom jquery to override the timepicker. 4. Custom value callback to change the date back before submitting to Drupal. This page helped a lot too: previousnext.com.au/blog/… – Morten Nov 2 '17 at 22:23

I accomplished this by doing what is recommended in this article.

If your module is glue.module, do this:

 * Implements hook_element_info_alter().
function glue_element_info_alter(array &$types) {
  $types['datetime']['#process'][] = 'glue_datetime_set_format';

 * Element process callback for datetime fields.
function glue_datetime_set_format($element) {
  // Remove seconds in browsers that support HTML5 type=date.
  $element['time']['#attributes']['step'] = 60;
  return $element;
  • This worked for me - thank you, @carsonw! – edwardchiapet Jul 3 at 14:59

Removing seconds from daterange widget

I removed the seconds from the daterange widget by setting the step attribute in hook_field_widget_WIDGET_TYPE_form_alter() to 60 (seconds)

function my_module_field_widget_time_range_form_alter(&$element, FormStateInterface $form_state, $context) {
  $element['value']['#attributes']['step'] = 60;
  $element['end_value']['#attributes']['step'] = 60;

For form fields set the step attribute to 0.

function THEME_preprocess_input(&$variables) {
  if ($variables['theme_hook_original'] == 'input__date' && $variables['attributes']['type'] == 'time') {
        $variables['attributes']['step'] = 0;
  • did not notice any change to my time fields with this – GiorgosK Feb 17 '18 at 18:41

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