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.
-
import { TimeRange } from "@nulogy/components";
<TimeRange
onRangeChange={(val) => val}
/>
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. |