Feature/calendar status handlers (Hacker0x01#1947)

* Add onCalendarOpen and onCalendarClose handlers to determine calendar state

* Fix build settings and the main path

Author: matkrzy

docs-site/src/components/Examples/index.js

@@ -65,6 +65,7 @@ import MonthPicker from "../../examples/monthPicker";
 import RangeMonthPicker from "../../examples/rangeMonthPicker";
 import QuarterPicker from "../../examples/quarterPicker";
 import RangeQuarterPicker from "../../examples/rangeQuarterPicker";
+import OnCalendarChangeStateCallbacks from "../../examples/onCalendarOpenStateCallbacks";
 
 import "./style.scss";
 import "react-datepicker/dist/react-datepicker.css";
@@ -323,6 +324,10 @@ export default class exampleComponents extends React.Component {
     {
       title: "Range Quarter Picker",
       component: RangeQuarterPicker
+    },
+    {
+      title: "Calendar open state callbacks",
+      component: OnCalendarChangeStateCallbacks
     }
   ];
 

docs-site/src/examples/onCalendarOpenStateCallbacks.js

@@ -0,0 +1,15 @@
+() => {
+  const [date, setDate] = useState(new Date());
+
+  const handleCalendarClose = () => console.log("Calendar closed");
+  const handleCalendarOpen = () => console.log("Calendar opened");
+
+  return (
+    <DatePicker
+      selected={date}
+      onChange={date => setDate(date)}
+      onCalendarClose={handleCalendarClose}
+      onCalendarOpen={handleCalendarOpen}
+    />
+  );
+};

docs/datepicker.md

@@ -41,15 +41,17 @@ General datepicker component.
 | `monthsShown`                | `number`                       | `1`             |                                            |
 | `name`                       | `string`                       |                 |                                            |
 | `onBlur`                     | `func`                         | `function() {}` |                                            |
+| `onCalendarClose`            | `func`                         |                 |                                            |
+| `onCalendarOpen`             | `func`                         |                 |                                            |
 | `onChange` (required)        | `func`                         | `function() {}` |                                            |
 | `onChangeRaw`                | `func`                         |                 |                                            |
 | `onClickOutside`             | `func`                         | `function() {}` |                                            |
 | `onFocus`                    | `func`                         | `function() {}` |                                            |
 | `onKeyDown`                  | `func`                         | `function() {}` |                                            |
 | `onMonthChange`              | `func`                         | `function() {}` |                                            |
-| `onYearChange`               | `func`                         | `function() {}` |                                            |
 | `onSelect`                   | `func`                         | `function() {}` |                                            |
 | `onWeekSelect`               | `func`                         |                 |                                            |
+| `onYearChange`               | `func`                         | `function() {}` |                                            |
 | `openToDate`                 | `instanceOf(Date)`             |                 |                                            |
 | `peekNextMonth`              | `bool`                         |                 |                                            |
 | `placeholderText`            | `string`                       |                 |                                            |