React Jalali Gregorian Date Picker

The JalaliGregorianDatePicker component is a date picker designed for use in React applications. It allows users to select dates from both the Jalali and Gregorian calendars, offering flexibility and ease of use.

Installation

The package can be installed via npm:

npm install react-jalali-gregorian-date-picker --save

Usage

React Component:

import {JalaliGregorianDatePicker} from "./components";
import {useState} from "react";

function App() {
    const [visible,setVisible] = useState(false)
    const [dateRange,setDateRange] = useState([])
    
  return (
    <div>
        <input type="text" id="testInput" onFocus={() => setVisible(true)}/>

        <JalaliGregorianDatePicker
            dateRange={dateRange}
            setDateRange={(dateRange) => setDateRange(dateRange.map(date => date))}
            elementId="testInput"
            isVisible={visible}
            setIsVisible={setVisible}
        />
    </div>
  )
}

export default App

Props

Here are the props that can be passed to the <ReactTransition /> component:

Prop Name	Type	Default Value	Description
color	String	blue	(optional): Customize the color scheme of the date picker.
isDark	Boolean	false	(optional): Enable dark mode for the date picker.
setDateRange	Function	undefiend	A function to update the selected date range.
dateRange	Array	undefiend	An array representing the selected date range.
elementId	String	''	(optional): The ID of the input element to attach the date picker to.
isVisible	Boolean	true	(optional): Control the visibility of the date picker.
setIsVisible	String	undefiend	(optional): A function to update the visibility of the date picker.

Contributing

If you want to contribute to this project and make it better, your help is very welcome. Create an issue or submit a pull request.