Usage

Get startedPropsCustomizationUtilitiesTypescriptExamples

Get started:

Welcome to react calendar date-time picker documentation

This package provides three types for selecting dates, including a single day, range of days and multiple days.
All the three types, like all other props, are available in both Gregorian and Jalali calendars.

Localization:

This package supports Gregorian and Jalali calendars.
'En' and 'Fa' can be assigned as the 'local' props to determine the calendar type.

Dependencies:

This package enjoys context api and hooks; therefore, based on react documentation you need at least React v16.8 or later.

Moreover, the only dependency used in this package is jalaali-js and it is just 1.1kb (MINIFIED + GZIPPED)

Installation:

The package can be installed via NPM:

npm install react-calendar-datetime-picker

Or by using Yarn:

yarn add react-calendar-datetime-picker

Usage:

Here's an example of basic usage:


import  DtPicker  from 'react-calendar-datetime-picker'
import 'react-calendar-datetime-picker/dist/index.css'

const DatePicker = () => {
  const [date, setDate] = useState(null)
  return (
      <DtPicker
        onChange={setDate}
        type='single'
        local='en'
        withTime
        showWeekend
      />
  )
}
export default DatePicker