DatePicker: onAfterMenuDismiss callback

common/changes/office-ui-fabric-react/kegorr-DatePicker-OnAfterMenuDismiss_2018-02-21-18-51.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DatePicker-onAfterMenuDismiss callback created",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "kegorr@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx

@@ -178,6 +178,13 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
+  public componentDidUpdate(prevProps: IDatePickerProps, prevState: IDatePickerState) {
+    // If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss
+    if (this.props.onAfterMenuDismiss && prevState.isDatePickerShown && !this.state.isDatePickerShown) {
+      this.props.onAfterMenuDismiss();
+    }
+  }
+
   public render() {
     const {
       firstDayOfWeek,

packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts

@@ -169,6 +169,11 @@ export interface IDatePickerProps extends React.Props<DatePicker> {
    * The initially highlighted date in the calendar picker
    */
   initialPickerDate?: Date;
+
+  /**
+ * Callback that runs after DatePicker's menu (Calendar) is closed
+ */
+  onAfterMenuDismiss?: () => void;
 }
 
 export interface IDatePickerStrings {

packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx

@@ -79,7 +79,14 @@ export class DatePickerBasicExample extends React.Component<{}, IDatePickerBasic
 
     return (
       <div>
-        <DatePicker firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Select a date...' />
+        <DatePicker
+          firstDayOfWeek={ firstDayOfWeek }
+          strings={ DayPickerStrings }
+          placeholder='Select a date...'
+          // tslint:disable:jsx-no-lambda
+          onAfterMenuDismiss={ () => console.log('onAfterMenuDismiss called') }
+        // tslint:enable:jsx-no-lambda
+        />
         <Dropdown
           label='Select the first day of the week'
           options={ [