1.0.2 • Published 4 years ago
@netojose/react-select-datepicker v1.0.2
React Select date picker
Install
Via npm
# npm
npm install --save @netojose/react-select-datepickerVia yarn
# yarn
yarn add @netojose/react-select-datepickerDemo
You can see a working demo at this Sandbox
Usage
import React, { useState } from "react";
import SelectDatePicker from "@netojose/react-select-datepicker";
export default function App() {
const [date, setDate] = useState(new Date(2000, 0, 1));
const handleChange = value => setDate(value);
return (
<div>
<SelectDatePicker value={date} onDateChange={handleChange} />
<p>Chosen date: {date.toString()}</p>
</div>
);
}Available Props
| Prop | Type | Description | Default | Options |
|---|---|---|---|---|
| value | Date | Current input value | REQUIRED | - |
| minDate | Date | Minimum date allowed | new Date(1900, 0, 1) | - |
| maxDate | Date | Maximum date allowed | new Date() | - |
| className | string | Wrapper class name | null | - |
| css | string | css function | null | - |
| onDateChange | func | onChange date trigger | REQUIRED | - |
| showErrors | boolean | Show or not error message | true | true, false |
| showLabels | boolean | Show or not input labels | true | true, false |
| yearLabel | boolean | Year label text | Year | Any string |
| monthLabel | boolean | Month label text | Month | Any string |
| dayLabel | boolean | Day label text | Day | Any string |
| errorFormat | string | Format error message | 'Invalid date' | Any string |
| errorMin | string | Error min value message | 'Date must be greater than allowed' | Any string |
| errorMax | string | Error max value message | 'Date must be less than allowed' | Any string |
| format | string | Inputs position | 'month/day/year' | 'day/month/year', 'day/year/month', 'month/day/year', 'month/year/day', 'year/month/day', 'year/day/month' |
| monthNames | array | Array with month names | 'January', ..., 'December' | An array with 12 strings |
Notes
Year Select Field
- If no minDate is provided than the minium year that can be selected is 1900
- If no maxDate is provided than the maxium year that can be selected is the current
CSS in js integration
- The
classNameprop can be useful to extend the component using Styled-components - The
cssprop can be useful to extend the component using Emotion
License
MIT © netojose