time-picker

import { TimePicker } from "src";

Example

  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
import { TimePicker } from 'calendar';

export function Example() {
  const [value, onChange] = React.useState('')
  return (
    <Playground>
      <div style={{ paddingBottom: '200px', display: 'flex' }}>
        <TimePicker priority="default" name="time" value={value} onChange={onChange} />
      </div>
    </Playground>
  )
}

Custom steps

  • 00
  • 02
  • 04
  • 06
  • 08
  • 10
  • 12
  • 14
  • 16
  • 18
  • 20
  • 22
  • 00
  • 05
  • 10
  • 15
  • 20
  • 25
  • 30
  • 35
  • 40
  • 45
  • 50
  • 55
  • 00
  • 10
  • 20
  • 30
  • 40
  • 50
import { TimePicker } from 'calendar';

export function Example() {
  const [value, onChange] = React.useState('')
  return (
    <Playground>
      <div style={{ paddingBottom: '200px', display: 'flex' }}>
        <TimePicker
          format="HH:mm:ss"
          priority="default"
          name="time"
          value={value}
          onChange={onChange}
          hourStep={2}
          minStep={5}
          secStep={10}
        />
      </div>
    </Playground>
  )
}

Disabled

  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 00
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
import { TimePicker } from 'calendar';

export function Example() {
  const [value, onChange] = React.useState('')
  return (
    <Playground>
      <div style={{ paddingBottom: '200px', display: 'flex' }}>
        <TimePicker priority="default" name="time" value={value} disabled onChange={onChange} />
      </div>
    </Playground>
  )
}

Props

NameTypeDefaultDescription
format'HH:mm:ss' l 'hh:mm:ss' l 'HH:mm' l 'hh:mm''HH:mm'time format
hourStepnumber1define set of available values for hour (eg. hourStep = 3, options = [0, 3, 6, 9...])
minStepnumber1define set of available values for min
secStepnumber1define set of available values for sec
onChange(newValue: string) => voidchange callback
...InputProps{}Props from Input component