Add support for onCalendarOpen and onCalendarClose

Fixes #140

Author: wojtekmaj

README.md

@@ -106,6 +106,8 @@ Displays an input field complete with custom inputs, native input, and a calenda
 |minDate|Defines minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-Picker will ensure that no earlier date is selected.|Date: `new Date()`|
 |minDetail|Defines the least detailed calendar view that the user shall see. Can be "month", "year", "decade" or "century". Defaults to "century".|`"century"`|
 |name|Defines input name. Defaults to "date".|`"myCustomName"`|
+|onCalendarClose|Function called when the calendar closes.|`() => alert('Calendar closed')`|
+|onCalendarOpen|Function called when the calendar opens.|`() => alert('Calendar opened')`|
 |onChange|Function called when the user clicks an item on the most detailed view available.|`(value) => alert('New date is: ', value)`|
 |returnValue|Defines which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be "start", "end" or "range". The latter will cause an array with start and end values to be passed. Defaults to "start".|`"range"`|
 |required|Defines whether date input should be required. Defaults to false.|`true`|

src/DatePicker.jsx

@@ -9,6 +9,8 @@ import Calendar from 'react-calendar/dist/entry.nostyle';
 
 import DateInput from './DateInput';
 
+import { callIfDefined } from './shared/utils';
+
 const baseClassName = 'react-date-picker';
 
 export default class DatePicker extends PureComponent {
@@ -34,6 +36,15 @@ export default class DatePicker extends PureComponent {
     document.addEventListener('focusin', this.onOutsideAction);
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const { isOpen } = this.state;
+    const { onCalendarClose, onCalendarOpen } = this.props;
+
+    if (isOpen !== prevState.isOpen) {
+      callIfDefined(isOpen ? onCalendarOpen : onCalendarClose);
+    }
+  }
+
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.onOutsideAction);
     document.removeEventListener('focusin', this.onOutsideAction);

src/shared/utils.js

@@ -1,5 +1,6 @@
 export {
   between,
+  callIfDefined,
 } from 'react-calendar/dist/shared/utils';
 
 const isValidNumber = a => typeof a === 'number' && !isNaN(a);

test/Test.jsx

@@ -15,6 +15,8 @@ import './Test.less';
 
 const now = new Date();
 
+/* eslint-disable no-console */
+
 export default class Test extends PureComponent {
   state = {
     disabled: false,
@@ -97,10 +99,8 @@ export default class Test extends PureComponent {
               onSubmit={(event) => {
                 event.preventDefault();
 
-                /* eslint-disable no-console */
                 console.warn('Calendar triggered submitting the form.');
                 console.log(event);
-                /* eslint-enable no-console */
               }}
             >
               <DatePicker
@@ -114,6 +114,8 @@ export default class Test extends PureComponent {
                 minDetail={minDetail}
                 name="myCustomName"
                 onChange={this.onChange}
+                onCalendarOpen={() => console.log('Calendar opened')}
+                onCalendarClose={() => console.log('Calendar closed')}
                 returnValue={returnValue}
                 required={required}
                 showLeadingZeros={showLeadingZeros}