npm

npm i react-multi-date-picker

yarn

yarn add react-multi-date-picker

Basic Import

DatePicker

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

Calendar

import { Calendar } from "react-multi-date-picker"

Important Notes

• I wrote this component in a way the user could be able to use it with or without the state.

  If you want to submit the user-selected dates directly without modification or you don't want to define an initial value, you can use this component without storing dates in the state.

  Example of using DatePicker without the state :

  <DatePicker />

  But If you want to modify the selected dates or you have an initial value, you need to use an external state and store the user-selected dates after modifying them in onChange function using setState.

  const [value, setValue] = useState(initialValue)
  .
  .
  .
  <DatePicker 
    value={value}
    onChange={handleChange}
  />
  
  function handleChange(value){
    //your modification on passed value ....
    setValue(value)
  }
  
  

• The initial value can be Date, DateObject, Number, or String, but as soon as the user selects a new date, its Type changes to DateObject.

  So in your submission form, if you want to convert the user-selected date to JavaScript Date, you can easily use the toDate() method.

  The point that needs to be mentioned about the toDate method is that if you defined an initial value with a type of something other than DateObject and the form submission is done before the user selects a new date, then it means that your initial value still has not been converted to DateObject. so it is better to add a condition like the following in your submission event:

  let [value, setValue] = useState(new Date())
  .
  .
  .
  <DatePicker 
    value={value}
    onChange={setValue}
  />
  .
  .
  .
  <button onClick={handleSubmit}>submit</button>
  .
  .
  .
  function handleSubmit(){
    if (value instanceof DateObject) value = value.toDate()
    
    submitDate(value)
  }
  
  

• If the value you enter to date picker or calendar is String and the format of the string is different from the default format (YYYY/MM/DD hh:mm:ss a), the format of that String must match the format you entered into the date picker. otherwise, the wrong date may be parse.

  For example, if you consider 05/18/2020 02:20:36 as a value, the format you enter in the datepicker or calendar should also be as follows: MM/DD/YYYY HH:mm:ss

  <DatePicker
    value="05/18/2020 02:20:36"
    format="MM/DD/YYYY HH:mm:ss"
  />

DatePicker

import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"

export default function Example() {
  const [value, setValue] = useState(new Date())

  return (
    <DatePicker 
      value={value}
      onChange={setValue}
    />
  )
}

Calendar

import React, { useState } from "react"
import { Calendar } from "react-multi-date-picker"

export default function Example() {
  const [value, setValue] = useState(new Date())

  return (
    <Calendar 
      value={value}
      onChange={setValue}
    />
  )
}

DateObject

import React from "react"
import DatePicker, { DateObject } from "react-multi-date-picker"

export default function Example() {
  const [value, setValue] = useState(new DateObject())
  
  return (
    <DatePicker 
      value={value} 
      onChange={setValue} 
    />
  )
}