react-calendar-datetime-picker

react-calendar-datetime-picker

The Simple and fast English and Persian calender for React

version: "1.7.5"

⚙️ Install

npm install react-calendar-datetime-picker
or
yarn add react-calendar-datetime-picker

⚡️ Usage

import { DtPicker } from 'react-calendar-datetime-picker'
import 'react-calendar-datetime-picker/dist/style.css'

const App = () => {
  const [date, setDate] = useState(null)
  return <DtPicker onChange={setDate} />
}

📄 Documentation

Documentation with examples

• Getting Started
• Props
• Customization
• Utilities
• Typescript
• Examples

🎯 Features

• Supports Gregorian and Jalali calender
• Uses context api to share data
• Supports three types of calender: single day - date range - multiple dates
• Fully customizable
• Supports maximum and minimum dates
• Capability to add a list of disabled dates
• Supports time for single and range type
• Capability to mark weekends
• Function called for change, open and close events
• Supports Typescript

🔧 Props

Property	Type	Required	Default	Description
onChange	func	true	-	A function that returns an object of selected date/dates.
initValue	Day	null		null
type	string		single	You can choose the selection type that you need to use. There exist 3 types: "single", "range", "multi"
local	string		en	This date picker supports both Gregorian and Jalali calenders.To select Gregorian calendar you have to set "local" to "en" and to "fa" for Jalali.
withTime	boolean		false	Should you need to use time in your date picker you can set this prop to true.This prop works only in single and range types.
showTimeInput	boolean		false	Helps you to show time in input date picker
showWeekend	boolean		false	Marks weekends by changing the color.
clearBtn	boolean		false	Add a button to your input to clear you calendar initial date/dates.
isRequired	boolean		false	This prop makes your input as a required field in the form validation
todayBtn	boolean		false	A button to move fast to the date of today in the calendar.
onCalenderChange	func			A callback that runs when the calendar value is changed
onCalenderShow	func			A callback that runs when the calendar opens
onCalenderHide	func			A callback that runs when the calendar closes
maxDate	Day			You can set this prop to limit the maximum date that the user can select.Periods partially overlapped by maxDate will also be selectable, although React-calendar-dateTime-picker will ensure that no later date is selected.
minDate	Day			You can set this prop to limit the minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-calendar-dateTime-picker will ensure that no earlier date is selected.
disabledDates	Day[]			A list of dates that you want the user not to select.
isDisabled	boolean		false	Use to disable the calendar input
yearListStyle	string		grid	Use to change year item list style(accepted value: grid, list)

🎨 Customization

Property	Type	Default	Description
placeholder	string	"select"	To change input date picker placeholder
inputClass	string		To change calendar's input style
clearBtnClass	string		To change calendar's clear button style
calenderModalClass	string		To change calendar's main modal style
headerClass	string		To change calendar's green header style
timeClass	string		To change calendar's time view style
daysClass	string		To change calendar's days view style
monthsClass	string		To change calendar's months view style
yearsClass	string		To change calendar's years view style
NextBtnIcon	svg as component	">"	To change next month button icon.
PreviousBtnIcon	svg as component	"<"	To change previous month button icon.
nextMonthBtnTitle	string	"next"	To change next month button title(shows by hover).
previousMonthBtnTitle	string	"previous"	To change previous month button title(shows by hover).
fromLabel	string	"from"	Starting date label in input result(works only in range type).
toLabel	string	"to"	Ending date label in input result(works only in range type).
clockFromLabel	string	"from"	Title for starting time in the time component(works only in range type).
clockToLabel	string	"to"	Title for ending time in the time component(works only in range type).
clockLabel	string	"clock"	Label for time in the time component(works in single and range type).

✔️ bundle size

You can check out this package bundle size in this Link

🙇 Special Thanks

Thanks to jalaali-js, the only dependency of this date picker.

📋 License

MIT © mehdinasiri

Changelog

[1.7.5] - 2/23/2025|

• update packages