Persian Date Picker

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

Installation

npm install --save mobin-datepicker

yarn add mobin-datepicker

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

// In _app.tsx file in Nextjs project added this
import "mobin-datepicker/styles.css";

// Add this in the component you want to use
import { DatePickerContainer, MobileDatePickerContainer } from "mobin-datepicker";
import "mobin-datepicker/styles.css";

// In App.jsx or App.tsx file in Vite React project added this
import { DatePickerContainer, MobileDatePickerContainer } from "mobin-datepicker";
import "mobin-datepicker/styles.css";

import { DatePickerContainer, MobileDatePickerContainer } from "mobin-datepicker";

const App = () => {
	return (
		<div>
			{/* To show in desktop screen */}
			<DatePickerContainer />

			{/* To show in mobile screen */}
			<MobileDatePickerContainer />
		</div>
	);
};

Advanced Examples

// in _app.tsx file in nextjs project added this
import "mobin-datepicker/styles.css";

// in App.jsx or App.tsx file in React project added this
import "mobin-datepicker/styles.css";

// in App.jsx or App.tsx file in Vite React project added this
import { DatePickerContainer, MobileDatePickerContainer } from "mobin-datepicker/index.js";
import "mobin-datepicker/styles.css";

import { DatePickerContainer, MobileDatePickerContainer } from "mobin-datepicker";

const App = () => {
	return (
		<div>
			{/* To show in desktop screen */}
			<DatePickerContainer
				value={new Date()}
				onChange={(date) => console.log(date)}
				minDate={new Date(1390)}
				maxDate={new Date()}
				timePicker={true}
				readOnly={false}
				inputContainerClassName=""
				inputClassName=""
				inputPlaceholder="Please select a date"
				calendarClassName=""
				dayClassName="rounded-xl cursor-pointer hover:border-1.5 hover:border-green-500"
				todayClassName="border-green-500 border-4 text-white"
				selectedDayClassName="bg-green-500 text-white"
				disabledDayClassName="line-through text-gray-300"
			/>

			{/* To show in mobile screen */}
			<MobileDatePickerContainer
				value={new Date()}
				onChange={(date) => console.log(date)}
				minDate={new Date(1390)}
				maxDate={new Date()}
				timePicker={true}
				readOnly={false}
				inputContainerClassName=""
				inputClassName=""
				inputPlaceholder="Please select a date"
				calendarClassName=""
				dayClassName="rounded-xl cursor-pointer hover:border-1.5 hover:border-green-500"
				todayClassName="border-green-500 border-4 text-white"
				selectedDayClassName="bg-green-500 text-white"
				disabledDayClassName="line-through text-gray-300"
			/>
		</div>
	);
};

License

Licensed under MIT