Persian Date Picker

Simple persian react date picker with React, TypeScript and Tailwindcss.

Installation

npm install --save persian-date-picker-reactjs

yarn add persian-date-picker-reactjs

Features

Available props

	Props	Types	Default
1	value	Date or string	--------	optional
1	onChange	function	(date: number) => void	optional
2	minDate	Date	--------	optional
3	maxDate	Date	--------	optional
4	timePicker	boolean	true	optional
5	readOnly	boolean	false	optional
6	inputContainerClassName	string	relative flex items-center w-fit justify-center h-12 border-1 border-secondary300 rounded-lg outline-none focus:outline-none	optional
6	inputClassName	string	flex items-center justify-center h-12 border-1 border-secondary300 rounded-lg outline-none focus:outline-none	optional
7	calendarIconClassName	string	flex h-full items-center justify-center rounded-r-lg bg-[#D9D9D9] px-4	optional
8	calendarClassName	string	flex w-full flex-col items-center justify-center	optional
9	dayClassName	string	flex h-12 w-12 items-center justify-center	optional
10	todayClassName	string	border-1.5 border-primary	optional
11	selectedDayClassName	string	bg-primary text-white	optional
12	disabledDayClassName	string	text-secondary300 cursor-text border-none	optional

Simple Usage

1// In _app.tsx file in Nextjs project added this
2import "persian-date-picker-reactjs/styles.css";
3
4// Add this in the component you want to use
5import { DatePickerContainer, MobileDatePickerContainer } from "persian-date-picker-reactjs";
6import "persian-date-picker-reactjs/styles.css";
7
8// In App.jsx or App.tsx file in Vite React project added this
9import { DatePickerContainer, MobileDatePickerContainer } from "persian-date-picker-reactjs";
10import "persian-date-picker-reactjs/styles.css";

1import { DatePickerContainer, MobileDatePickerContainer } from "persian-date-picker-reactjs";
2
3const App = () => {
4	return (
5		<div>
6			{/* To show in desktop screen */}
7			<DatePickerContainer />
8
9			{/* To show in mobile screen */}
10			<MobileDatePickerContainer />
11		</div>
12	);
13};

Advanced Examples

1// in _app.tsx file in nextjs project added this
2import "persian-date-picker-reactjs/styles.css";
3
4// in App.jsx or App.tsx file in React project added this
5import "persian-date-picker-reactjs/styles.css";
6
7// in App.jsx or App.tsx file in Vite React project added this
8import { DatePickerContainer, MobileDatePickerContainer } from "persian-date-picker-reactjs/index.js";
9import "persian-date-picker-reactjs/styles.css";

1import { DatePickerContainer, MobileDatePickerContainer } from "persian-date-picker-reactjs";
2
3const App = () => {
4	return (
5		<div>
6			{/* To show in desktop screen */}
7			<DatePickerContainer
8				value={new Date()}
9				onChange={(date) => console.log(date)}
10				minDate={new Date(1390)}
11				maxDate={new Date()}
12				timePicker={true}
13				readOnly={false}
14				inputContainerClassName=""
15				inputClassName=""
16				inputPlaceholder="Please select a date"
17				calendarClassName=""
18				dayClassName="rounded-xl cursor-pointer hover:border-1.5 hover:border-green-500"
19				todayClassName="border-green-500 border-4 text-white"
20				selectedDayClassName="bg-green-500 text-white"
21				disabledDayClassName="line-through text-gray-300"
22			/>
23
24			{/* To show in mobile screen */}
25			<MobileDatePickerContainer
26				value={new Date()}
27				onChange={(date) => console.log(date)}
28				minDate={new Date(1390)}
29				maxDate={new Date()}
30				timePicker={true}
31				readOnly={false}
32				inputContainerClassName=""
33				inputClassName=""
34				inputPlaceholder="Please select a date"
35				calendarClassName=""
36				dayClassName="rounded-xl cursor-pointer hover:border-1.5 hover:border-green-500"
37				todayClassName="border-green-500 border-4 text-white"
38				selectedDayClassName="bg-green-500 text-white"
39				disabledDayClassName="line-through text-gray-300"
40			/>
41		</div>
42	);
43};

License

Licensed under MIT