Month Range

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

-

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

<MonthRange
  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.

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: 'Month Range'}

Options for the month range label. See fieldLabelProps for available option keys.

disableRangeValidation

boolean

false

Disables the the end date before start date error message.

disableAutocomplete

boolean

false

Disables auto-completing the year after typing in the month

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.

Related components