semantic-ui-calendar-react
semantic-ui-calendar-react copied to clipboard
Blocking Out Entire Month Kills Component
Describe the bug If you disable the full current month the component breaks.
To Reproduce Steps to reproduce the behavior:
- In a component add:
import { DateInput } from "semantic-ui-calendar-react";
const disableDates = [
"5-01-2020",
"5-02-2020",
"5-03-2020",
"5-04-2020",
"5-05-2020",
"5-06-2020",
"5-07-2020",
"5-08-2020",
"5-09-2020",
"5-10-2020",
"5-11-2020",
"5-12-2020",
"5-13-2020",
"5-14-2020",
"5-15-2020",
"5-16-2020",
"5-17-2020",
"5-18-2020",
"5-19-2020",
"5-20-2020",
"5-21-2020",
"5-22-2020",
"5-23-2020",
"5-24-2020",
"5-25-2020",
"5-26-2020",
"5-27-2020",
"5-28-2020",
"5-29-2020",
"5-30-2020",
"5-31-2020",
];
const SomeComponent = () => {
return (
<>
<DateInput readonly={true}
name="date" dateFormat="MM-DD-YYYY" placeholder="Date" value={props.formData.date}
iconPosition="left" disable={disableDates} hideMobileKeyboard={true}
popupPosition="top center" onChange={handleInputChange}
error={props.formErrors.dateError} />;
</>
);
};
- Click the input
- See errors in console:
Expected behavior Should show full month blocked out, not error.
Dependencies versions
- semantic-ui-react: ^0.88.1
- semantic-ui-css (or any alternative): ^2.4.1
- semantic-ui-calendar-react: ^0.15.3
Noticed the same problem before.
I managed to get it fixed but this repo appears to be no longer maintained by the owner. So I made some code change in my own fork and published a new package, feel free to use or fork it. I do not intend to do any further devlopment on it though, unless it breaks in the future.
https://github.com/zheyujie/semantic-ui-calendar-react
You can simply do npm install semantic-ui-calendar-react-yz
to replace your semantic-ui-calendar-react
Demo: https://codesandbox.io/s/great-kare-ry5q8?file=/src/index.js
Related issue: #176
@zheyujie thank you so much! Works great!