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 />;
}

Availble props

Key	value	default
date	Date, DateObject, String or Number	new Date()
timePicker	Boolean	false
onlyTimePicker	Boolean	false
liveChange	Boolean	false
format	String	YYYY/MM/DD
local	en or fa	en
calendar	gregorian, persian or arabic	gregorian
onChange	Function	-

Example

1- Date

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

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

2- String

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

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

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

3-timePicker

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

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

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

4-onlyTimePicker

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

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

5-onChange

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

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

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

6-local and calendar

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

<DatePicker
    date="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"
/>