Date Range

Date 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 { DateRange } from "@nulogy/components";

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

Date Range with Times

HH:MM

-

HH:MM
<DateRange
  onRangeChange={(val) => val}
  showTimes
/>

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.

startDateInputProps

Object

undefined

Options for the start date input field, see inputProps table.

endDateInputProps

Object

undefined

Options for the end date input field, see inputProps table.

defaultStartDate

String

undefined

The default start date.

defaultEndDate

String

undefined

The default end date.

dateFormat

String

MMM yyyy

The default date format (see date-fns for available date formats)

errorMessage

String

undefined

The error message to display for the range.

startDateErrorMessage

String

undefined

The error message to display below the start date.

endDateErrorMessage

String

undefined

The error message to display below the end date.

minDate

Date

undefined

The earliest date that can be selected.

maxDate

Date

undefined

The latest date that can be selected.

labelProps

Object

{ labelText: 'Date Range'}

Options for the month range label. See Label Props for available option keys.

disableRangeValidation

boolean

false

Disables the end date before start date error message.

showTimes

boolean

false

Shows time pickers next to the date inputs so that a times can be selected.

minTime

24 hour time string e.g: 02:30

undefined

The earliest time that can be selected.

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.

maxTime

24 hour time string e.g: 02:30

undefined

The latest time that can be selected.

timeFormat

String

hh:mm aa

The default date format (see date-fns for available date formats)

interval

Number

15

The time difference in minutes between the time options

Input Props

NameTypeDefaultDescription

id

String

null

A unique ID for this input

name

String

undefined

A unique name for this input

disabled

Boolean

false

Marks the field as disabled and disallows user input

helpText

Node

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.

labelText

String

null

Informs users what the corresponding input field is for.

placeholder

String

null

A hint to the expected format for the field. Not a replacement for a label.

required

Boolean

false

Makes the field require selection before the form will submit.

requirementText

String

null

(Optional) or (Required).

className

String

undefined

className passed to the wrapper element.

onChange

Function

undefined

Change event handler that will be run whenever the value of the input is updated.

onBlur

Function

undefined

Change event handler that will be run whenever the input loses focus.

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.