Time Range

Time ranges allow users to easily enter a range of dates. If the end date is before the start date, by default an error message will be displayed.

Time range

HH:MM

import { TimeRange } from "@nulogy/components";

<TimeRange
  onRangeChange={(val) => val}
/>

Props

Name	Type	Default	Description
onRangeChange	function	undefined	The function that will be called whenever the dates in the month range change. Returns an object with the start date, end date and current error, if any.
defaultStartTime	24 hour time string e.g: 02:30	undefined	The default start date.
defaultEndTime	24 hour time string e.g: 02:30	undefined	The default end date.
timeFormat	String	hh:mm aa	The default date format (see date-fns for available date formats)
errorMessage	String	undefined	The error message to display for the range.
startTimeErrorMessage	String	undefined	The error message to display below the start date.
endTimeErrorMessage	String	undefined	The error message to display below the end date.
minTime	24 hour time string e.g: 02:30	undefined	The earliest time that can be selected.
maxTime	24 hour time string e.g: 02:30	undefined	The latest time that can be selected.
labelProps	Object	{ labelText: 'Time Range'}	Options for the month range label. See Label Props for available option keys.
disableRangeValidation	boolean	false	Disables the the end date before start date error message.
interval	Number	15	The time difference in minutes between the time options

Name	Type	Default	Description
labelText	String	Required	Informs users what the corresponding input field is for.
helpText	String	null	Placed below the label to provide assistance on how to fill out a field or the expected format. It can also provide an explanation of why the information is needed and how it will be used.
requirementText	String	null	Text to add to the the label: (Optional) or (Required).
className	String	undefined	className passed to the group wrapper.