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.

Table of contents

• 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

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 (
    <div>
       <DatePicker
          isCalendarOpen={isCalendarOpen}
          setIsCalendarOpen={setIsCalendarOpen}
          selectedDate={date}
          setSelectedDate={(date) => setDate(date)}
          language={language}
          selectedDateFormat={selectedDateFormat}
          inputStyle={inputStyle}
          ariaLabelName={ariaLabelName}
          minAgeRequired={minAgeRequired}
      />
	</div>
  );
}

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 (繁體中文)