Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/netojose/react-select-datepicker
React Select Datepicker
https://github.com/netojose/react-select-datepicker
Last synced: about 6 hours ago
JSON representation
React Select Datepicker
- Host: GitHub
- URL: https://github.com/netojose/react-select-datepicker
- Owner: netojose
- Created: 2020-03-30T08:23:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T17:54:49.000Z (almost 2 years ago)
- Last Synced: 2024-08-08T18:35:40.433Z (3 months ago)
- Language: JavaScript
- Homepage: https://codesandbox.io/s/select-date-picker-js6vh
- Size: 4.03 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Select date picker
## Install
### Via npm
```bash
# npm
npm install --save @netojose/react-select-datepicker
```
### Via yarn
```bash
# yarn
yarn add @netojose/react-select-datepicker
```
## Demo
You can see a working demo at this [Sandbox](https://codesandbox.io/s/select-date-picker-js6vh)
## Usage
```jsx
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 (
Chosen date: {date.toString()}
);
}
```
## 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 `className` prop can be useful to extend the component using [Styled-components](https://styled-components.com/)
* The `css` prop can be useful to extend the component using [Emotion](https://emotion.sh/)
## License
MIT © [netojose](https://github.com/netojose)