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.

HH:MM

-

HH:MM
import { TimeRange } from "@nulogy/components";

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

Props

NameTypeDefaultDescription

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

Label Props

NameTypeDefaultDescription

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.