diff --git a/common/changes/office-ui-fabric-react/datepicker-isopen-4176_2018-03-12-18-20.json b/common/changes/office-ui-fabric-react/datepicker-isopen-4176_2018-03-12-18-20.json
new file mode 100644
index 00000000000000..4f6969b0f67574
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/datepicker-isopen-4176_2018-03-12-18-20.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Added an is-open class to the DatePicker root element to indicate when the datepicker is being shown based on the IDatePickerState.isDatePickerShown state property.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-brgarl@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
index 8a4010c10bcaa7..26c65aa91dd0a7 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
@@ -206,7 +206,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     const { isDatePickerShown, formattedDate, selectedDate, errorMessage } = this.state;
 
     return (
-      <div className={ css('ms-DatePicker', styles.root, className) }>
+      <div className={ css('ms-DatePicker', styles.root, isDatePickerShown && 'is-open', className) }>
         { label && (
           <Label required={ isRequired }>{ label }</Label>
         ) }