TimePicker

TimePickers allow users to easily enter times.

labelText

timeFormat

interval

minTime

maxTime

value

defaultValue

onInputChange

(e) => console.log('onInputChange', e)

(e) => console.log('onInputChange', e)

onChange

(e) => console.log('onChange', e)

(e) => console.log('onChange', e)

import * as React from "react";
import { TimePicker } from "@nulogy/components";

export default () => {
  return (
    <TimePicker
      labelText="End Time"
      interval={15}
      minTime="09:00"
      maxTime="17:00"
      onInputChange={e => console.log("onInputChange", e)}
      onChange={e => console.log("onChange", e)}
    />
  );
}

import * as React from "react";
import { TimePicker } from "@nulogy/components";

export default () => {
  return (
    <TimePicker
      labelText="End Time"
      interval={15}
      minTime="09:00"
      maxTime="17:00"
      onInputChange={e => console.log("onInputChange", e)}
      onChange={e => console.log("onChange", e)}
    />
  );
}

Props

Name	Type	Default	Description
labelText	string		The label
timeFormat	string	hh:mm aa	The default time format (see date-fns for available time formats)
interval	number	15	The time difference in minutes between the time options
minTime	string		The latest time that can be selected in 24 hour time string format e.g: 02: 30
maxTime	string		The latest time that can be selected in 24 hour time string e.g: 02: 30
value	string		Value of input, used when controlling the component in 24 hour time string e.g: 02: 30
defaultValue	string		Default value of input
onInputChange	function		Event handler for when the value typed into the input changes
onChange	function		Event handler for when the selected value changes

TimePicker

Props

Related Components