semantic-ui-calendar-react icon indicating copy to clipboard operation
semantic-ui-calendar-react copied to clipboard

Blocking Out Entire Month Kills Component

Open DannyHinshaw opened this issue 4 years ago • 2 comments

Describe the bug If you disable the full current month the component breaks.

To Reproduce Steps to reproduce the behavior:

  1. 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} />;
    </>
  );
};
  1. Click the input
  2. See errors in console: Screen Shot 2020-05-27 at 2 39 51 PM

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

DannyHinshaw avatar May 27 '20 18:05 DannyHinshaw

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 avatar Oct 11 '20 23:10 zheyujie

@zheyujie thank you so much! Works great!

DannyHinshaw avatar Oct 16 '20 15:10 DannyHinshaw