Constructor
# <DatePicker id label value onChange onFocus onBlurFunction yearsBackNumber yearsForwardNumber separator dateFormat firstDayOfTheWeek previousButtonText nextButtonText todayButtonText labelClassName formatDateClassName dateClassName headerClassName datePickerInputWrapperClassName datePickerWrapperClassName datePickerClassName datePickerNavWrapperClassName datePickerPreviousButtonClassName datePickerTodayButtonClassName datePickerNextButtonClassName datePickerMonthDropdownWrapperClassName datePickerYearDropdownWrapperClassName calendarWrapperClassName calendarTableClassName calendarHeaderClassName calendarHeaderTrClassName calendarHeaderThClassName calendarBodyClassName calendarBodyTrClassName calendarBodyTdClassName calendarForbiddenClassName calendarOtherMonthClassName calendarTodayClassName calendarSelectedClassName monthDropdownLabel monthListLabel monthShowListLabel monthDropdownLabelClassName monthDropdownWrapperClassName monthDropdownButtonClassName monthDropdownIconClassName monthDropdownListWrapperClassName monthDropdownOptionClassName monthDropdownOptionSelectedClassName monthDropdownListClassName monthDropdownListLabelClassName monthDropdownInputClassName yearDropdownLabel yearListLabel yearShowListLabel yearDropdownLabelClassName yearDropdownWrapperClassName yearDropdownButtonClassName yearDropdownIconClassName yearDropdownListWrapperClassName yearDropdownOptionClassName yearDropdownOptionSelectedClassName yearDropdownListClassName yearDropdownListLabelClassName yearDropdownInputClassName error maxLength required requiredFeedbackEnabled requiredFeedback inputClassName inputWrapperClassName activeClassName invalidClassName errorClassName requiredFeedbackClassName />
A date picker that allows the user to select a date. The date picker is a modal that contains a calendar. The calendar is open if the input is focused and closed if the user clicks outside of the date picker. The user can select a date by clicking on a day of the calendar or by typing in the input. If the user enters something that is not a valid date, the today's date will be selected. The calendar can start a Sunday or Monday, and can be in MMDDYYYY or DDMMYYYY format. The separator can be customized, by default it is a "/". The year and month shown in the calendar can be selected with dropdowns. There are also arrow buttons to navigate through the months. A range of years can be customized, by default it is from 120 years back and 50 years forward to current year.
PropTypes:
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
id |
string | Yes | The id of the date picker | |
label |
string | No | The label of the date picker | |
value |
node | No | The value of the date picker | "" |
onChange |
func | No | The callback function that is called when the date picker is changed | |
onFocus |
func | No | The callback function that is called when the date picker input is focused | |
onBlurFunction |
func | No | The callback function that is called when the date picker input is blurred | |
yearsBackNumber |
number | No | The number of years to go back from the current year | 120 |
yearsForwardNumber |
number | No | The number of years to go forward from the current year | 50 |
separator |
string | No | The separator between the day, month and year | "/" |
dateFormat |
string | No | The format of the date ("MMDDYYYY" or "DDMMYYYY") | "MMDDYYYY" |
firstDayOfTheWeek |
string | No | The date to be shown in the date picker ("Monday" or "Sunday") | "Sunday" |
previousButtonText |
string | No | The text of the previous button | "" |
nextButtonText |
string | No | The text of the next button | "" |
todayButtonText |
string | No | The text of the today button | "Today" |
labelClassName |
string | No | The class name of the label | "form-label" |
formatDateClassName |
string | No | The class name of formatDate helper | "date-format" |
dateClassName |
string | No | The class name of the date | "date" |
headerClassName |
string | No | The class name of the header table | "header-day" |
datePickerInputWrapperClassName |
string | No | The class name of the date picker input wrapper | "date-picker-input-wrapper" |
datePickerWrapperClassName |
string | No | The class name of the date picker wrapper | "date-picker-wrapper" |
datePickerClassName |
string | No | The class name of the date picker | "date-picker" |
datePickerNavWrapperClassName |
string | No | The class name of the nav wrapper | "date-picker-nav-wrapper" |
datePickerPreviousButtonClassName |
string | No | The class name of the previous button | "prev" |
datePickerTodayButtonClassName |
string | No | The class name of the today button | "today" |
datePickerNextButtonClassName |
string | No | The class name of the next button | "next" |
datePickerMonthDropdownWrapperClassName |
string | No | The class name of the month dropdown wrapper | "label month-picker" |
datePickerYearDropdownWrapperClassName |
string | No | The class name of the year dropdown wrapper | "label year-picker" |
calendarWrapperClassName |
string | No | The class name of the calendar wrapper | "calendar" |
calendarTableClassName |
string | No | The class name of the calendar table | "" |
calendarHeaderClassName |
string | No | The class name of the calendar header | "" |
calendarHeaderTrClassName |
string | No | The class name of the calendar header tr | "" |
calendarHeaderThClassName |
string | No | The class name of the calendar header th | "header-day-wrapper" |
calendarBodyClassName |
string | No | The class name of the calendar body | "" |
calendarBodyTrClassName |
string | No | The class name of the calendar body tr | "" |
calendarBodyTdClassName |
string | No | The class name of the calendar body td | "date-wrapper" |
calendarForbiddenClassName |
string | No | The class name of the forbidden days | "forbidden-date" |
calendarOtherMonthClassName |
string | No | The class name of the other month days | "other-month" |
calendarTodayClassName |
string | No | The class name of the today days | "calendar-today" |
calendarSelectedClassName |
string | No | The class name of the selected days | "current-selection" |
monthDropdownLabel |
string | No | the label of the month dropdown | "Chose the month" |
monthListLabel |
string | No | The label of the month list | "Choose your month" |
monthShowListLabel |
bool | No | The label of the short month list | false |
monthDropdownLabelClassName |
string | No | The class name of the month dropdown label | "sr-only" |
monthDropdownWrapperClassName |
string | No | The class name of the month dropdown wrapper | "dropdown-wrapper" |
monthDropdownButtonClassName |
string | No | The class name of the month dropdown button | "dropdown-button" |
monthDropdownIconClassName |
string | No | The class name of the month dropdown icon | "dropdown-icon" |
monthDropdownListWrapperClassName |
string | No | The class name of the month dropdown list wrapper | "dropdown-list-wrapper" |
monthDropdownOptionClassName |
string | No | The class name of the month dropdown option | "dropdown-option" |
monthDropdownOptionSelectedClassName |
string | No | The class name of the month dropdown option selected | "current-selection" |
monthDropdownListClassName |
string | No | The class name of the month dropdown list | "dropdown-list" |
monthDropdownListLabelClassName |
string | No | The class name of the month dropdown list li | "label" |
monthDropdownInputClassName |
string | No | The class name of the month dropdown input | "dropdown-text" |
yearDropdownLabel |
string | No | The label of the year dropdown | "Chose the year" |
yearListLabel |
string | No | The label of the year list | "Choose your year" |
yearShowListLabel |
bool | No | The label of the short year list | false |
yearDropdownLabelClassName |
string | No | The class name of the year dropdown label | "sr-only" |
yearDropdownWrapperClassName |
string | No | The class name of the year dropdown wrapper | "dropdown-wrapper" |
yearDropdownButtonClassName |
string | No | The class name of the year dropdown button | "dropdown-button" |
yearDropdownIconClassName |
string | No | The class name of the year dropdown icon | "dropdown-icon" |
yearDropdownListWrapperClassName |
string | No | The class name of the year dropdown list wrapper | "dropdown-list-wrapper" |
yearDropdownOptionClassName |
string | No | The class name of the year dropdown option | "dropdown-option" |
yearDropdownOptionSelectedClassName |
string | No | The class name of the year dropdown option selected | "current-selection" |
yearDropdownListClassName |
string | No | The class name of the year dropdown list | "dropdown-list" |
yearDropdownListLabelClassName |
string | No | The class name of the year dropdown list li | "label" |
yearDropdownInputClassName |
string | No | The class name of the year dropdown input | "dropdown-text" |
error |
string | No | The error message | |
maxLength |
number | No | The max length of the input | 10 |
required |
bool | No | Whether the input is required | false |
requiredFeedbackEnabled |
bool | No | Whether the required feedback is enabled | false |
requiredFeedback |
string | No | The required feedback message | "*" |
inputClassName |
string | No | The class name of the dropdown input | "form-control form-input" |
inputWrapperClassName |
string | No | The class name of the input wrapper | "form-group" |
activeClassName |
string | No | The class name of the active state | "active" |
invalidClassName |
string | No | The class name of the invalid state | "invalid" |
errorClassName |
string | No | The class name of the error state | "error" |
requiredFeedbackClassName |
string | No | The class name of the required feedback | "required" |
- The date picker component.
React.Component
Methods
# inner handleChangeInput()
When user manually enters a something in input, check if it is valid date If true, update the states.
# inner handleDayClick()
When a day in calendar is clicked, the selected/showed date, day, month, and year states are set. Also the date picker is closed
# inner handleFocus()
If the onFocus prop is defined, call it with the event. Then open the date picker.
# inner handleNextMonth()
It increments the month by one, unless the month is December, in which case it increments the year by one and sets the month to January
# inner handleOnBlur()
When user blur the input, check if the date is valid If not valid, reset the date to the today date. If the onBlur prop is defined, call it with the date and id of the datePicker.
# inner handlePreviousMonth()
It decrements the month by one, unless the month is January in which case it decrements the year by one and sets the month to January
# inner isDateValid()
Checks if the date is valid and in the correct format Also the year must be within the min and max year
A boolean value.
# inner twoDigit()
It takes a number, if it is less than 10, it adds a 0 to the front of it.
a string of two digits.