React Select date picker

Install

Via npm

# npm
npm install --save @netojose/react-select-datepicker

Via yarn

# yarn
yarn add @netojose/react-select-datepicker

Demo

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 className prop can be useful to extend the component using Styled-components
• The css prop can be useful to extend the component using Emotion

License

MIT © netojose