How to Use 24-Hour Time in Bootstrap: Native Inputs and Plugin Integration

Bootstrap 5 does not ship a dedicated timepicker widget, so displaying 24-hour time requires using the native HTML <input type="time"> element with ISO-8601 formatted values or integrating a third-party library like Tempus Dominus.

The twbs/bootstrap repository relies on standard HTML5 form controls rather than custom JavaScript components for time selection. To implement 24-hour time in bootstrap timepicker scenarios, you will leverage the browser's native time input capabilities, which Bootstrap styles through its reboot stylesheet in scss/_reboot.scss.

Understanding Bootstrap's Native Time Input Approach

Bootstrap 5 delegates time selection entirely to the browser's built-in <input type="time"> element. According to the source documentation in site/src/content/docs/content/reboot.mdx (lines 328-329), Bootstrap provides standardized styling for these native inputs but does not implement custom time selection logic or dropdown widgets.

The styling logic in scss/_reboot.scss (lines 443-444) specifically handles WebKit browser defaults, ensuring that native time inputs render consistently across platforms while maintaining their inherent 24-hour formatting capabilities when the underlying value uses standard ISO-8601 syntax.

Implementing 24-Hour Time with Pure Bootstrap

For a solution requiring no external JavaScript dependencies, use the HTML5 time input with specific attributes that enforce 24-hour format compliance:

• ISO-8601 value format: Supply the value attribute in HH:MM or HH:MM:SS format (e.g., value="14:30" for 2:30 PM)
• Step attribute: Use step="60" to restrict selection to minute-level increments and avoid seconds confusion
• Pattern validation: Add pattern="[0-9]{2}:[0-5][0-9]" to enforce client-side validation of 24-hour format

<div class="mb-3">
  <label for="time24" class="form-label">Select time (24-hour)</label>
  <input type="time"
         class="form-control"
         id="time24"
         name="time24"
         value="14:30"
         step="60"
         pattern="[0-9]{2}:[0-5][0-9]"
         required>
</div>

The browser renders this according to the user's locale settings, but the underlying value always remains in 24-hour format, ensuring consistent data submission.

Validating 24-Hour Format with HTML Attributes

When you need to guarantee that users cannot enter 12-hour time with AM/PM indicators, combine the pattern attribute with the required attribute. The regular expression [0-9]{2}:[0-5][0-9] rejects values like "02:30 PM" or "2:30", enforcing strict 24-hour entry.

Note: The native picker UI may still display 12-hour format in certain locales (particularly en-US), but the pattern attribute prevents form submission of non-conforming values. For guaranteed 24-hour UI display regardless of locale, you must use a custom JavaScript plugin.

Integrating Third-Party Timepicker Libraries

For a richer interface with dropdown selectors, scrolling wheels, or guaranteed 24-hour display across all locales, integrate Tempus Dominus or similar Bootstrap-compatible plugins. These libraries replace the native input with custom controls that you can configure for strict 24-hour formatting.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6/dist/css/tempus-dominus.min.css">
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6/dist/js/tempus-dominus.min.js"></script>

<div class="mb-3 position-relative">
  <label for="tp" class="form-label">Pick a time (24-hour)</label>
  <input type="text"
         class="form-control"
         id="tp"
         data-td-toggle="timepicker"
         data-td-format="HH:mm">
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    new tempusDominus.TempusDominus(document.getElementById('tp'), {
      display: { 
        components: { 
          calendar: false, 
          date: false, 
          month: false, 
          year: false, 
          decades: false 
        } 
      }
    });
  });
</script>

This configuration disables calendar components and relies on the data-td-format="HH:mm" setting to enforce 24-hour display mode.

Customizing Styles with Bootstrap's Reboot

The scss/_reboot.scss file contains specific rules that style native time inputs while excluding them from certain WebKit-specific calendar picker stylings. If you need to customize the native browser time picker's appearance (primarily in WebKit browsers), target the ::webkit-calendar-picker-indicator pseudo-element in your custom CSS.

However, Bootstrap's approach intentionally preserves the browser's native rendering for accessibility and mobile optimization, as documented in site/src/content/docs/forms/input-group.mdx regarding input group integrations with time inputs.

Summary

• Bootstrap 5 has no built-in timepicker: The framework relies entirely on HTML5 <input type="time"> elements styled via scss/_reboot.scss.
• Native inputs support 24-hour time: Use value="HH:MM" format and pattern="[0-9]{2}:[0-5][0-9]" validation to enforce 24-hour standards.
• Third-party plugins required for custom UI: Libraries like Tempus Dominus provide dropdown interfaces with explicit 24-hour formatting options.
• Mobile compatibility: Native inputs automatically adapt to device-specific time pickers while maintaining ISO-8601 value formatting.

Frequently Asked Questions

Does Bootstrap 5 include a built-in timepicker component?

No, Bootstrap 5 does not ship with a dedicated timepicker widget. According to the source code in site/src/content/docs/content/reboot.mdx, the framework relies on the native HTML <input type="time"> element, which browsers render using their platform-specific interfaces. For custom timepicker UIs, you must integrate third-party plugins like Tempus Dominus.

How do I force the 24-hour format on mobile browsers?

You cannot override the browser's locale-based display format for native time inputs. The mobile operating system controls whether the picker displays 12-hour or 24-hour format based on the device's regional settings. However, you can ensure the value always uses 24-hour format by providing it as HH:MM and validating with the pattern attribute. For a guaranteed 24-hour UI across all devices, use a JavaScript timepicker plugin configured with format: 'HH:mm'.

Can I use Bootstrap Input Groups with time inputs?

Yes, Bootstrap supports wrapping native time inputs with input groups for prepending icons or buttons. The styling rules in scss/_reboot.scss ensure that [type="time"] inputs work correctly within Bootstrap's input group component structure, as documented in the site/src/content/docs/forms/input-group.mdx examples.

Why does my time input show seconds in some browsers but not others?

The display granularity depends on the browser's implementation and whether your value includes seconds. Use the step attribute to control precision: step="60" for minutes only, or omit it to allow seconds. Per the HTML5 specification, browsers may default to showing seconds when the value attribute includes them (e.g., value="14:30:00").

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}