React-date-picker-janouy NPM

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

☀️ 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).