react-calendar-datetime-picker

The Simple and fast English and Persian calender for React

version: "1.7.4"

⚙️ 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|You can set a default value for your date using this property.| |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