@moamfar/react-time-date-picker

React Time Date Picker

A React component library providing elegant and intuitive iOS-style pickers for Gregorian dates times and Jalaali (Persian) dates and Hijri dates offering a consistent user experience in your React applications.

🧐 Features

Here're some of the project's best features:

• Time Picker
• Date Picker
• Jalaali Date Picker
• Hijri Date Picker

🛠️ Installation Steps:

1. Install

npm install @moamfar/react-time-date-picker

2. import style.css to your code

import "@moamfar/react-time-date-picker/dist/style.css";

📸 ScreenShots

Date Picker

Time Picker

Date Picker Jalaali

Date Picker Hijri

🔴 Props

TimePicker Props

Prop	Description	Required	Default Value
selectedTime	value of returned time object	Yes	undefined
setSelectedTime	function for setting value of returned time object	Yes	undefined
is24Hours	if the time picker should use 24 hours format	No	false
utcOffset	Offset of moment utc. It can be string or number.	No	210
submitCallback	function that calls after clicking on submit button	No	undefined
submitTitle	Title of submit button	No	"Submit"
buttonClassName	Tailwind classNames for button	No	"w-full bg-black rounded-md flex items-center justify-center h-10"
submitTitleClassName	Tailwind classNames for button title	No	"text-white"
containerClassName	Tailwind classNames for container	No	"flex px-[10%] md:px-[25%] flex-row items-center justify-center w-full h-[18rem] overflow-hidden relative"

DatePicker Props

Prop	Description	Required	Default Value
selectedDate	value of returned date object	Yes	undefined
setSelectedDate	function for setting value of returned date object	Yes	undefined
maxYear	-	Yes	Current year
minYear	-	Yes	100 Years back
submitCallback	function that calls after clicking on submit button	No	undefined
submitTitle	Title of submit button	No	"Submit"
buttonClassName	Tailwind classNames for button	No	"w-full bg-black rounded-md flex items-center justify-center h-10"
submitTitleClassName	Tailwind classNames for button title	No	"text-white"
containerClassName	Tailwind classNames for container	No	"flex px-[10%] md:px-[25%] flex-row items-center justify-center w-full h-[18rem] overflow-hidden relative"
columnsOrder	order of year, month and day columns.	Yes	["day", "month", "year"]

💻 Built with

Technologies used in the project:

• TailwindCSS
• Embla
• moment
• moment-jalaali
• moment-hijri