Date Picker

This is a simple date picker component for React. It displays an input field, that can be linked to a label, aria-labels, etc… But the difference is that when you click on the input field, a calendar appears, allowing you to select a date with a simple click.

Requirements

This component requires Node ≥6.9.0, React ≥18.2, and PropTypes ≥15.7.2 .

Installation

To install the date picker component, run the following command:

npm install @vtjdp/date-picker

Usage

To use the date picker component, import it into your project as follows:

import DatePicker from '@vdjdp/date-picker'

Then, use it in your project as follows:

<DatePicker />

Parameters

The date picker component accepts the following parameters: | parameter | description | possible values | default value | |:-------------:|:-----------------------------------------------------:|:--------------------:|:-----------------:| | lang | The language that will be used for the month display. | ISO 639-1 codes | 'default' | | format | The format for the date : standard, US, or ISO | DMY/MDY/YMD | 'DMY' | | start | The first day of the week displayed in the calendar. | Day names in english | 'monday' |

lang: 'default' means that the language will be the one of the browser.

Parameters can be passed to the component in an object, as follows:

<DatePicker lang="en-US" format="MDY" start='sunday' />

DatePicker also accepts various parameters that will be passed to the input field, as follows:

<DatePicker
    lang="en-US"
    format="MDY"
    start='sunday'
    id="date-of-birth"
    className="input-homepage"
    style={{width: '100%'}}
    value={dateOfBirth}
    onChange={(date) => setDateOfBirth(date)}
/>