---
schema_version: "1"
id: 71098ab8abbdc121072fdfbe5c7902c475d8bf867fd74b001c568aeb0c128132
title: Time Picker
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/time/lightning-time.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-time.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 76564559988671d57cb823be0e18ea8746966594aad7d06d09098be20a855713
products:
  - Lightning Component Reference
---

# Time Picker

**`lightning-input`**
_type="time"_

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="time" model="lwc" namespace="lightning"}


:::::

:::::tab

A time field includes a text input to type a time and a timepicker
to select a time.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-input type="time" label="Time"> </lightning-input>
</template>
```
<!-- prettier-ignore-end -->

## Design

`lightning-input` implements designs in the Salesforce Lightning Design System (SLDS). The input types adapt to SLDS 1 or [SLDS 2 styling](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm) based on the org's theme or the container app that you use.

| Input Type | SLDS 1                                                                    | SLDS 2                                                                     |
| ---------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| time       | [Timepicker](https://v1.lightningdesignsystem.com/components/timepicker/) | [Timepicker](https://www.lightningdesignsystem.com/components/timepicker/) |

## Usage

On mobile devices, this component uses the native timepicker, which ignores the `time-style` attribute. The native timepicker uses the user's device settings for the input time format.

On desktop, this component uses a timepicker styled with the Lightning Design System. This picker uses the user's Salesforce locale setting for the time format, either 12-hr time with AM/PM or 24-hr time format. The entered date and time are validated against the user's Salesforce locale format during the `blur` event.

## Time Style

The component uses the attribute `time-style="short"` by default, so the timepicker
displays time without seconds. To display time including seconds, set `time-style="medium"`.

Use the `value` attribute to optionally supply an initial time as an ISO8601 formatted time string
such as `14:00:00.000`.

## Time Range

Set `min` and `max` to ISO8601 formatted time strings to constrain the allowed time value. The time picker displays time values that are within the range only. If you type a time that's outside the range, the `blur` event triggers the field to display a validation error message.

## Add Field-Level Help and Placeholder Text

To provide a hint for entering information in the field, specify help text with the `field-level-help` attribute. Field-level help adds an info icon next to the input label, with a tooltip displaying your specified help text.

Adding a `placeholder` value shows the placeholder text in both the date and time fields.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-input
        type="time"
        label="Event Time"
        field-level-help="The event time must be between 9AM and 9PM"
    >
    </lightning-input>
</template>
```
<!-- prettier-ignore-end -->

## Input Validation

To ensure a time is provided, use the `required` attribute. Use `min` and `max` attributes to constrain the allowed time range. The component automatically validates the time format based on the user's Salesforce locale.

```html
<template>
  <lightning-input
    type="time"
    label="Appointment Time"
    required
    min="09:00:00.000"
    max="17:00:00.000"
    lwc:ref="appointmentTime"
    message-when-value-missing="Appointment time is required"
    message-when-range-underflow="Appointment must be after 9:00 AM"
    message-when-range-overflow="Appointment must be before 5:00 PM"
  >
  </lightning-input>
</template>
```

An error icon is displayed on an invalid time field, except on desktop browsers.

**note:** For the default error messages, see the [`lightning-input` documentation](/docs/platform/lightning-component-reference/guide/lightning-input.html).

To validate the time input, use the `checkValidity()` method. If the value isn't valid, the `reportValidity()` method shows the error message below the time field.

```javascript
import { LightningElement } from "lwc";

export default class TimeValidation extends LightningElement {
  handleSubmit() {
    const timeInput = this.refs.appointmentTime;
    console.log(timeInput.validity.valid); // Returns true or false
    if (!timeInput.checkValidity()) {
      timeInput.reportValidity();
      return;
    }
    // Proceed with form submission
    const selectedTime = timeInput.value;
  }
}
```

The `validity` attribute returns an object with read-only boolean properties. For the `time` type, these attributes apply:

- `badInput` - Indicates that the value is invalid or doesn't match the allowed format for the user's locale
- `customError` - Indicates that a custom error has been set using `setCustomValidity()`
- `patternMismatch` - Indicates that the value doesn't match the allowed pattern
- `rangeOverflow` - Indicates that the time is greater than the specified `max` attribute
- `rangeUnderflow` - Indicates that the time is less than the specified `min` attribute
- `typeMismatch` - Indicates that an invalid format was entered
- `valueMissing` - Indicates that no value is provided when the `required` attribute is set
- `valid` - True if none of the preceding properties are true

The `badInput` validity error for `date` and `datetime` fields displays a default message that varies by locale. For example, "Your entry does not match the allowed format Dec 31, 2024" is displayed for en-US locale, but a different date format is shown for a different locale.

The `valueMissing` validity error for `date` and `datetime` displays "Complete this field with format `[format]`" where `[format]` is the date format that's determined by the user locale. For example: "Complete this field with format Dec 31, 2024"

## Usage Considerations

By default, the timepicker renders above all modals and the main Salesforce header.

You can guide users with a `field-level-help` tooltip and a `placeholder` prompt in the text field,
as described in [Add Field-Level Help and Placeholder Text](#add-field-level-help-and-placeholder-text).

## Accessibility

When you use the `label` attribute, the component generates a unique ID for the internal `<label>` and uses a standard `for` attribute to link it to the time field.

If you use the `label-hidden` variant, the component maintains the `for` attribute to link between the time field and the label.

If you use the `field-level-help` attribute, the component creates an `aria-describedby` link between the time field and the help tooltip.

If the time field fails validation, the component adds `aria-invalid="true"` and links the error message to the input by using `aria-describedby`.

For additional ARIA attributes that you can use, see the [`lightning-input` Specifications tab](/docs/platform/lightning-component-reference/guide/lightning-input.html?type=Specifications).

## Custom Events

**`change`**

The event fired when a value is changed in the input field.

The `change` event returns one of the following `event.target` parameters, depending on input type.

| Parameter | Type   | Description              |
| --------- | ------ | ------------------------ |
| value     | string | Returns the input value. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | true  | This event bubbles up through the DOM.                                                                    |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | true  | This event propagates outside of the component in which it was dispatched.                                |

## See Also

[`lightning-input`](/docs/platform/lightning-component-reference/guide/lightning-input.html)


:::::

:::::tab
For this component's attributes and methods, see the [`lightning-input` Specifications tab](/docs/platform/lightning-component-reference/guide/lightning-input.html?type=Specifications).


:::::

::::::