1.3.10 • Published 2 years ago

persian-date-picker-reactjs v1.3.10

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

PropsTypesDefault
1valueDate or string--------optional
1onChangefunction(date: number) => voidoptional
2minDateDate--------optional
3maxDateDate--------optional
4timePickerbooleantrueoptional
5readOnlybooleanfalseoptional
6inputContainerClassNamestringrelative flex items-center w-fit justify-center h-12 border-1 border-secondary300 rounded-lg outline-none focus:outline-noneoptional
6inputClassNamestringflex items-center justify-center h-12 border-1 border-secondary300 rounded-lg outline-none focus:outline-noneoptional
7calendarIconClassNamestringflex h-full items-center justify-center rounded-r-lg bg-#D9D9D9 px-4optional
8calendarClassNamestringflex w-full flex-col items-center justify-centeroptional
9dayClassNamestringflex h-12 w-12 items-center justify-centeroptional
10todayClassNamestringborder-1.5 border-primaryoptional
11selectedDayClassNamestringbg-primary text-whiteoptional
12disabledDayClassNamestringtext-secondary300 cursor-text border-noneoptional

Simple Usage

// In _app.tsx file in Nextjs project added this
import "persian-date-picker-reactjs/styles.css";

// Add this in the component you want to use
import { DatePickerContainer, MobileDatePickerContainer } from "persian-date-picker-reactjs";
import "persian-date-picker-reactjs/styles.css";

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

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

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

date-picker-blue

Advanced Examples

// in _app.tsx file in nextjs project added this
import "persian-date-picker-reactjs/styles.css";

// in App.jsx or App.tsx file in React project added this
import "persian-date-picker-reactjs/styles.css";

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

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>
	);
};

date-picker-green

License

Licensed under MIT

1.2.0

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.3.9

2 years ago

1.3.8

2 years ago

1.2.12

2 years ago

1.2.13

2 years ago

1.2.10

2 years ago

1.2.11

2 years ago

1.2.14

2 years ago

1.2.15

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.12

2 years ago

1.0.44

2 years ago

1.1.11

2 years ago

1.0.43

2 years ago

1.1.10

2 years ago

1.0.42

2 years ago

1.0.41

2 years ago

1.1.16

2 years ago

1.0.48

2 years ago

1.1.15

2 years ago

1.0.47

2 years ago

1.1.14

2 years ago

1.0.46

2 years ago

1.1.13

2 years ago

1.0.45

2 years ago

1.1.19

2 years ago

1.1.18

2 years ago

1.1.17

2 years ago

1.0.49

2 years ago

1.0.51

2 years ago

1.0.50

2 years ago

1.2.9

2 years ago

1.1.21

2 years ago

1.1.20

2 years ago

1.3.10

2 years ago

1.3.7

2 years ago

1.3.6

2 years ago

1.3.5

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.39

2 years ago

1.0.17

2 years ago

1.0.38

2 years ago

1.0.16

2 years ago

1.0.40

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.33

2 years ago

1.0.11

2 years ago

1.0.32

2 years ago

1.0.10

2 years ago

1.0.31

2 years ago

1.0.30

2 years ago

1.0.37

2 years ago

1.0.15

2 years ago

1.0.36

2 years ago

1.0.14

2 years ago

1.0.35

2 years ago

1.0.13

2 years ago

1.0.34

2 years ago

1.0.12

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago