react-multi-date-picker

DatePicker

Installation

npm install --save react-multi-date-picker

Usage

import react from "react";
import DatePicker from "react-multi-date-picker";

export default function Example() {
  return <DatePicker />;
}

Demo

https://shahabyazdi.github.io/react-multi-date-picker

Availble props

Key	value	default	Availability (DatePicker/ Calendar)
value	Date, DateObject, String, Number or Array	new Date()	both
range	Boolean	false	both
timePicker	Boolean	false	both
onlyTimePicker	Boolean	false	both
mustShowDates	Boolean	true (in multiple & range mode)	both
range	Boolean	false	both
format	String	YYYY/MM/DD	both
local	String ( "en", "fa" or "ar" )	en	both
calendar	String ("gregorian", "persian" or "arabic")	gregorian	both
onChange	Function	undefined	both
className	String	""	both
inputClass	String	""	DatePicker
name	String	""	DatePicker
placeholder	String	""	DatePicker
style	Object	{}	DatePicker

Examples

1- Date

<DatePicker
    value={new Date()}
/>

<DatePicker
    value={new Date(2020,9,27)}
/>

2- String

<DatePicker
    value="2020/08/27"
/>

<DatePicker
    value="2020/27/08"
    format="YYYY/DD/MM"
/>

<DatePicker
    value="August 27 2020"
    format="MMMM DD YYYY"
/>

3-timePicker

<DatePicker
    value="2020/08/27 12:30:31"
    format="YYYY/MM/DD HH:mm:ss"
    timePicker
/>

<DatePicker
    value={new Date()}
    format="YYYY-MM-DD HH:mm:ss"
    timePicker
/>

<DatePicker
    value="August 27 2020 12:30:31 am"
    format="MMMM DD YYYY hh:mm:ss a"
    timePicker
/>

4-onlyTimePicker

<DatePicker
    value="12:30:31 am"
    format="hh:mm:ss a"
    onlyTimePicker
/>

<DatePicker
    value={new Date()}
    format="hh-mm-ss A"
    onlyTimePicker
/>

5-onChange

<DatePicker
    value={new Date()}
    format="YYYY/MM/DD hh:mm:ss a"
    timePicker
    onChange={dateObject=>{
        console.log(dateObject.toDate())
    }}
/>

<DatePicker
    value="2020/08/27 11:10:59 am"
    format="YYYY/MM/DD hh:mm:ss a"
    timePicker
    onChange={dateObject =>{
        if(dateObject.isValid){
            console.log(dateObject.format())
        }
    }}
/>

6-local and calendar

<DatePicker
    value={new Date()}
    format="YYYY/MM/DD hh:mm:ss a"
    calendar="persian"
    local="fa"
    timePicker
    onChange={dateObject =>{
        console.log(dateObject.convert("gregorian").format())
    }}
/>

<DatePicker
    value="1399/06/05 12:30:24 pm"
    format="YYYY/MM/DD hh:mm:ss a"
    calendar="persian"
    local="en"
    timePicker
/>

<DatePicker
    calendar="arabic"
    local="ar"
/>