readOnly <Calendar /> support

[AshenCat]

Thank you for this awesome calendar picker component!
I just have a question about the approach for making the calendar component read only and not change values when a date is clicked?

also, Typo on Calendar ref page (Opene instead of Open(?))

react-multi-date-picker/website/src/docs/ref.js

Line 50 in 00569f7

title: "Opene & Close Calendar By DatePicker Ref",

[shahabyazdi]

Hello
Thank you very much for reminding the typo.

Is this enough to make the calendar readOnly?

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

export default function App() {
  const [value, setValue] = useState();

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

Or do I need to add a readOnly prop for this purpose?

[AshenCat]

hmmm, I see that it works when the value is on a useState. For my use case, I have an array of objects with dates so I don't have a setValue for each iteration as all of the dates is on a single state. Putting an onChange with an empty function does not make the calendar read only.

[shahabyazdi]

I will add the readOnly prop in v2.9.0.
So that, when readOnly is activated, the user can no longer select a new date by the calendar

[shahabyazdi]

Automatically closed with my merge command!

readOnly and disabled added to version 2.9.0.
Adding these properties disables the calendar and prevents the user from changing or editing the initial value.
Please take a look at these links and let me know if the problem persists.

1- Read Only Calendar
2- Disabled Calendar

[AshenCat]

works perfectly now, thank you!

[shahabyazdi]

You're welcome.