<DatePicker
  currentDate={
    new DateObject({ 
      year: 2021,
      month: 2,
      day: 1
    })
  }
/>

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

export default function Example() {
  const [date, setDate] = useState(
    new DateObject(),
  );

  function update(key, value) {
    date[key] += value;

    setDate(new DateObject(date));
  }

  const style = {
    display: "inline-block",
    width: "90px",
    fontSize: "16px",
  };

  return (
    <div style={{ textAlign: "center" }}>
      <div>
        <button onClick={() => update("month", 1)}>+</button>
        <span style={style}>{date.month.name}</span>
        <button onClick={() => update("month", -1)}>-</button>
      </div>
      <div>
        <button onClick={() => update("year", 1)}>+</button>
        <span style={style}>{date.year}</span>
        <button onClick={() => update("year", -1)}>-</button>
      </div>
      <DatePicker 
        currentDate={date}
        calendarPosition="bottom-center"
      />
    </div>
  )
}  

You can use the weekStartDayIndex property to change the start day of the week.

For example, if you want the start day of the week to be Monday, you should set the weekStartDayIndex value to 1.

The value of weekStartDayIndex must be a number between 0 and 6.

<DatePicker 
  weekStartDayIndex={1} 
/>

<DatePicker 
  showOtherDays 
/>

<DatePicker 
  monthYearSeparator="|" 
/>

<DatePicker 
  highlightToday={false}
  onOpenPickNewDate={false}
/>

<DatePicker 
  displayWeekNumbers
  weekNumber="WN" 
/>

Using this prop sets the fixMainPosition value true while scrolling.

<DatePicker 
  scrollSensitive={false} 
/>

<Calendar 
  fullYear 
/>

<DatePicker 
  hideOnScroll 
/>

<DatePickers
  format="Date:YYYY/MM/DD, Time:HH:mm:ss"
  formattingIgnoreList={["Date", "Time"]}
  plugins={[
    <TimePicker position="bottom" />
  ]}
/>

<DatePicker
  inputMode="none"
/>

This feature only affects input in single mode.

<DatePicker
  editable={false}
/>

<DatePicker
  placeholder="click to open"
/>

<DatePicker 
  disableYearPicker 
/>

<DatePicker 
  disableMonthPicker 
/>

<DatePicker 
  hideYear 
/>

<DatePicker 
  hideMonth 
/>

<DatePicker 
  hideWeekDays 
/>

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

Both readOnly and disabled props prevent the user from selecting a new date, except that in readOnly mode, the calendar header remains active, but in disabled mode, the calendar header is also disabled.

<Calendar
  value={[
    new DateObject().toFirstOfWeek(),
    new DateObject().toLastOfWeek(),
  ]}
  range
  readOnly
/>

<Calendar 
  value={new DateObject()} 
  disabled 
/>

<DatePicker 
  disabled 
/>