React simple date picker

Description

react-test-janouy is a simple React component that allows you to add a calendar date picker to your React application.

- Main features
- Installation
- Technologies
- Usage
- Customizable properties

Main features

- ☀️ Select days
- 🌎 Localizable into many language
- 📄 Easy to integrate

Installation

To install react-date-picker-janouy in your project, you can use NPM:

``npm i react-date-picker-janouy

!NodeJS !JavaScript !CSS3 !HTML5 !React

`Technologies & dependencies`

- JS - CSS - React - date-fns

`Usage`

To use Calendar in your React project, you need to import it into your component and use it as a regular React component. Here's an example:

import DatePicker from "react-date-picker-janouy/dist/components/DatePicker"; import { useState } from "react";

function MyComponent() { const language = "en"; const selectedDateFormat = "MM.dd.yyyy"; const inputStyle = { width: 197, height: 25, fontSize: 13 }; const [date, setDate] = useState(); const [isCalendarOpen, setIsCalendarOpen] = useState(false); const ariaLabelName = "dateInput"; const showCalendar = () => { setIsCalendarOpen(true); }; const minAgeRequired=18;

return (


                 isCalendarOpen={isCalendarOpen}
          setIsCalendarOpen={setIsCalendarOpen}
          selectedDate={date}
          setSelectedDate={(date) => setDate(date)}
          language={language}
          selectedDateFormat={selectedDateFormat}
          inputStyle={inputStyle}
          ariaLabelName={ariaLabelName}
          minAgeRequired={minAgeRequired}
      />


  );
}

`Customizable properties`

The following properties can be used to customize the EasyModale component:

- isCalendarOpen* (boolean): Determines whether the calendar is currently open or not.

- setIsCalendarOpen* (function): A function that changes the calendarOpen state.

- selectedDate* (string): A string that represents the date on which the user clicked.

- setSelectedDate* (function): A function that changes selectedDate's value.

- language (string): Determinates the calendar's language. (default: 'en'). Click [Here to see supported languages.

- selectedDateFormat (string): Determinates the selectedDate's format. (default: 'MM.dd.yyyy').

- inputStyle (object) : Set the input apparence. (default: { width: 100, height: 14, fontSize: 12 };).

- ariaLabelName (string): If you want to add a personal 'name' && 'aria-label' to your input. (default: dateInput).

- minAgeRequired` (number): For a date of birth, you can add an age of majority. Later dates will be disabled. (default: null).

\*required

Supported languages:

- ar - Arabic
- az - Azerbaijanian (Azeri)
- bg - Bulgarian
- bs - Bosanski
- ca - Català
- ch - Simplified Chinese
- cs - Čeština
- da - Dansk
- de - German
- el - Ελληνικά
- en - English
- en-GB - English (British)
- es - Spanish
- et - "Eesti"
- eu - Euskara
- fa - Persian
- fi - Finnish (Suomi)
- fr - French
- gl - Galego
- he - Hebrew (עברית)
- hr - Hrvatski
- hu - Hungarian
- id - Indonesian
- it - Italian
- ja - Japanese
- ko - Korean (한국어)
- kr - Korean
- lt - Lithuanian (lietuvių)
- lv - Latvian (Latviešu)
- mk - Macedonian (Македонски)
- mn - Mongolian (Монгол)
- nl - Dutch
- no - Norwegian
- pl - Polish
- pt - Portuguese
- pt-BR - Português(Brasil)
- ro - Romanian
- ru - Russian
- se - Swedish
- sk - Slovenčina
- sl - Slovenščina
- sq - Albanian (Shqip)
- sr - Serbian Cyrillic (Српски)
- sr-YU - Serbian (Srpski)
- sv - Svenska
- th - Thai
- tr - Turkish
- uk - Ukrainian
- vi - Vietnamese
- zh - Simplified Chinese (简体中文)
- zh-TW - Traditional Chinese (繁體中文)