Skip to content

mmehdinasiri/react-calendar-datetime-picker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-calendar-datetime-picker

The Simple and fast English and Persian calender for React

version: "1.7.4" NPM JavaScript Style Guide

⚙️ 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

🎯 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