Month Picker

Month pickers allow users to easily enter months.

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

<MonthPicker
  selected={new Date("Fri, 01 Jan 2019")}
  onChange={(val) => val}
  onInputChange={(val) => val}
/>

Props

NameTypeDefaultDescription

selected

Date

undefined

The time to display

inputProps

Object

undefined

Options for the input field, see inputProps table

dateFormat

String

MMM yyyy

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

errorMessage

String

undefined

The error message to display

minDate

Date

undefined

The earliest date that can be selected

maxDate

Date

undefined

The latest date that can be selected

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.

Related components