Skip to main content
API contract 3.4

TimeInput

A clock picker for a time-of-day value, stored as an HH:MM:SS string.

Use it for a time without a date. For a timestamp use DateTimeInput.

Example​

<TimeInput source="pickup_from" label="Pickup from" />

Props​

It takes the shared input props — source, label, helperText, validate, defaultValue, disabled and readOnly behave as they do on any other input.

NameTypeDefaultDescription
source (required)string—Name of the field on the record
labelstring | falselabel from the schemafalse renders the picker without a label
helperTextstring | false—false hides the helper line unless the field is invalid

The input is always fullWidth and size="small"; the picker opens on a click anywhere in the field, not only on the clock icon.

Value format​

The picker works with Date internally but never stores one:

  • reading — HH:MM:SS, HH:MM, a Date or a timestamp number are all accepted; hours, minutes and seconds are applied to today's date and milliseconds are zeroed
  • writing — always "HH:MM:SS", zero-padded
  • clearing the field writes null

That is why the value round-trips unchanged through a backend TimeField / t.time column, with no timezone involved.

Schema mapping​

The component is picked for format: "time":

{"name": "pickup_from", "type": "string", "format": "time"}
class Pickup(models.Model):
    pickup_from = models.TimeField()

TimeFilter maps to the same format on the filter side.

See also​

Storybook