---
title: TimeField
category: Forms
---

```jsx live
render(() => {
  const [time, setTime] = React.useState([9, 30])
  return <TimeField value={time} onChange={(time) => setTime(time)} />
})
```

```jsx live
const START_OF_TODAY = dateFns.startOfDay(new Date())
const END_OF_TODAY = dateFns.endOfDay(new Date())
render(() => {
  const [date, setDate] = React.useState(START_OF_TODAY)
  const [startTime, setStartTime] = React.useState([11, 45])
  const [endTime, setEndTime] = React.useState(
    TimeField.getTimeFromDate(END_OF_TODAY)
  )
  const [twelveHourClock, setTwelveHourClock] = React.useState(true)
  const [minutesToAdd, setMinutesToAdd] = React.useState(30)
  return (
    <StackView spacing={1}>
      <StackView axis="horizontal" spacing={1}>
        <DateField
          value={date}
          onChange={(date) => {
            console.log({ date })
            setDate(date)
          }}
        />
        <TimeField
          twelveHourClock={twelveHourClock}
          value={startTime}
          onChange={(time) => {
            console.log(time)
            setStartTime(time)
          }}
        />
        <TimeField
          twelveHourClock={twelveHourClock}
          value={endTime}
          onChange={(time) => {
            console.log(time)
            setEndTime(time)
          }}
        />
      </StackView>
      <Card spacing={<Divider />}>
        <StackView axis="horizontal" alignment="center" padding={1} spacing={1}>
          <Checkbox
            label="Twelve hour clock"
            checked={twelveHourClock}
            onChange={(event) => setTwelveHourClock(event.target.checked)}
          />
          <Input.InputBox marginLeft="auto">
            <NumberField value={minutesToAdd} onChange={setMinutesToAdd} />
          </Input.InputBox>
          <Button
            title="Add minutes"
            variant="outline"
            onClick={() => {
              setStartTime(TimeField.addMinutesToTime(startTime, minutesToAdd))
              setEndTime(TimeField.addMinutesToTime(endTime, minutesToAdd))
            }}
          />
        </StackView>
        <StackView alignment="center" padding={1} spacing={1}>
          <Text>
            <Text inline weight="bold" marginRight={1}>
              Start Date:
            </Text>
            {dateFns.format(
              TimeField.addTimeToDate(date, startTime),
              'MM/dd/yyyy h:mm a'
            )}
          </Text>
          <Text>
            <Text inline weight="bold" marginRight={1}>
              End Date:
            </Text>
            {dateFns.format(
              TimeField.addTimeToDate(date, endTime),
              'MM/dd/yyyy hh:mm a'
            )}
          </Text>
        </StackView>
      </Card>
    </StackView>
  )
})
```