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
multiple	Boolean	false (true if value is Array)	both
range	Boolean	false	both
timePicker	Boolean	false	both
onlyTimePicker	Boolean	false	both
mustShowDates	Boolean	false (true in multiple & range mode)	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
style	Object	{}	DatePicker
type	String ("input", "input-icon", "button", "icon")	input	DatePicker
render	React.Component, Function	undefined	DatePicker
disabled	Boolean	false	DatePicker
placeholder	String	""	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"
/>