diff --git a/common/changes/office-ui-fabric-react/datepicker-mergestyles-step-2_2018-06-27-22-54.json b/common/changes/office-ui-fabric-react/datepicker-mergestyles-step-2_2018-06-27-22-54.json
new file mode 100644
index 0000000000000..1484e0b43520c
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/datepicker-mergestyles-step-2_2018-06-27-22-54.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DatePicker MergeStyles step 2 - Converts scss to js styles",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-jescla@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx
index 3d3968fd650b1..167958ca1d849 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx
@@ -1,15 +1,21 @@
 import * as React from 'react';
-import { IDatePicker, IDatePickerProps, IDatePickerStrings } from './DatePicker.types';
+import {
+  IDatePicker,
+  IDatePickerProps,
+  IDatePickerStrings,
+  IDatePickerStyleProps,
+  IDatePickerStyles
+} from './DatePicker.types';
+import { BaseComponent, KeyCodes, createRef, classNamesFunction } from '../../Utilities';
 import { Calendar, ICalendar, DayOfWeek } from '../../Calendar';
 import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { TextField, ITextField } from '../../TextField';
-import { BaseComponent, KeyCodes, css, createRef } from '../../Utilities';
 import { compareDates, compareDatePart } from '../../utilities/dateMath/DateMath';
-import * as stylesImport from './DatePicker.scss';
 import { FocusTrapZone } from '../../FocusTrapZone';
-const styles: any = stylesImport;
+
+const getClassNames = classNamesFunction<IDatePickerStyleProps, IDatePickerStyles>();
 
 export interface IDatePickerState {
   selectedDate?: Date;
@@ -145,6 +151,9 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
       firstDayOfWeek,
       strings,
       label,
+      theme,
+      className,
+      styles,
       initialPickerDate,
       isRequired,
       disabled,
@@ -153,19 +162,25 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
       placeholder,
       allowTextInput,
       borderless,
-      className,
       minDate,
       maxDate,
       calendarProps
     } = this.props;
     const { isDatePickerShown, formattedDate, selectedDate, errorMessage } = this.state;
 
+    const classNames = getClassNames(styles, {
+      theme: theme!,
+      className,
+      disabled,
+      label: !!label,
+      isDatePickerShown
+    });
+
     return (
-      <div className={css('ms-DatePicker', styles.root, isDatePickerShown && 'is-open', className)}>
+      <div className={classNames.root}>
         <div ref={this._datePickerDiv}>
           <TextField
             label={label}
-            className={styles.textField}
             ariaLabel={ariaLabel}
             aria-haspopup="true"
             aria-expanded={isDatePickerShown}
@@ -182,11 +197,7 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
             iconProps={{
               iconName: 'Calendar',
               onClick: this._onIconClick,
-              className: css(
-                disabled && styles.msDatePickerDisabled,
-                label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label',
-                label ? styles.eventWithLabel : styles.eventWithoutLabel
-              )
+              className: classNames.icon
             }}
             readOnly={!allowTextInput}
             value={formattedDate}
@@ -199,7 +210,7 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
             role="dialog"
             ariaLabel={pickerAriaLabel}
             isBeakVisible={false}
-            className={css('ms-DatePicker-callout')}
+            className={classNames.callout}
             gapSpace={0}
             doNotLayer={false}
             target={this._datePickerDiv.current}
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss
deleted file mode 100644
index 2b345f0fc454e..0000000000000
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@import '../../common/common';
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Date Picker styles
-
-@mixin ms-DatePicker-event() {
-  color: $ms-color-neutralSecondary;
-  font-size: $ms-icon-size-m;
-  line-height: 18px;
-  pointer-events: none;
-  position: absolute;
-  @include ms-right(9px);
-}
-
-.root {
-  @include ms-normalize;
-}
-
-.textField {
-  position: relative;
-
-  input::-ms-clear {
-    display: none;
-  }
-
-  input[readonly] {
-    cursor: pointer;
-  }
-}
-
-// Insert a calendar icon over the date field.
-.eventWithLabel {
-  @include ms-DatePicker-event();
-  bottom:5px;
-
-  &:not(.msDatePickerDisabled) {
-    pointer-events: initial;
-    cursor: pointer;
-  }
-}
-
-.eventWithoutLabel {
-  @include ms-DatePicker-event();
-  top: 7px;
-
-  &:not(.msDatePickerDisabled) {
-    pointer-events: initial;
-    cursor: pointer;
-  }
-}
-
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.styles.ts b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.styles.ts
index 868ae899123aa..36a648846be03 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.styles.ts
@@ -1,17 +1,59 @@
 import { IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types';
+import { IStyle, normalize, getGlobalClassNames, FontSizes } from '../../Styling';
 
-export const getStyles = (props: IDatePickerStyleProps): IDatePickerStyles => {
-  const { className } = props;
+const GlobalClassNames = {
+  root: 'ms-DatePicker',
+  callout: 'ms-DatePicker-callout',
+  withLabel: 'ms-DatePicker-event--with-label',
+  withoutLabel: 'ms-DatePicker-event--without-label',
+  disabled: 'msDatePickerDisabled '
+};
+
+export const styles = (props: IDatePickerStyleProps): IDatePickerStyles => {
+  const { className, theme, disabled, label, isDatePickerShown } = props;
+  const { palette } = theme;
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
+  const DatePickerEvent: IStyle = {
+    color: palette.neutralSecondary,
+    fontSize: FontSizes.icon,
+    lineHeight: '18px',
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: '9px'
+  };
 
   return {
-    root: [
-      'ms-DatePicker',
+    root: [classNames.root, isDatePickerShown && 'is-open', normalize, className],
+    textField: [
       {
-        // Insert css properties
-      },
-      className
+        position: 'relative',
+        selectors: {
+          '& input[readonly]': {
+            cursor: 'pointer'
+          },
+          input: {
+            selectors: {
+              '::-ms-clear': {
+                display: 'none'
+              }
+            }
+          }
+        }
+      }
+    ],
+    callout: [classNames.callout],
+    icon: [
+      DatePickerEvent,
+      !label && [classNames.withoutLabel, { top: '7px' }],
+      label && [classNames.withLabel, { bottom: '5px' }],
+      !disabled && [
+        classNames.disabled,
+        {
+          pointerEvents: 'initial',
+          cursor: 'pointer'
+        }
+      ]
     ]
-
-    // Insert className styles
   };
 };
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx
index e1793826656fc..fbff8d58cd2c2 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 import { Calendar, ICalendarStrings } from '../Calendar';
+import { DatePicker } from './DatePicker';
 import { DatePickerBase } from './DatePicker.base';
 import { IDatePickerStrings } from './DatePicker.types';
 import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues';
@@ -9,7 +10,7 @@ import { shallow, mount, ReactWrapper } from 'enzyme';
 describe('DatePicker', () => {
   it('renders default DatePicker correctly', () => {
     // This will only render the input. Calendar component has its own snapshot.
-    const component = renderer.create(<DatePickerBase />);
+    const component = renderer.create(<DatePicker />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
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 22a4615b8ac1f..50478aa7e00d1 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
@@ -1,14 +1,14 @@
 import { styled } from '../../Utilities';
 import { IDatePickerProps, IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types';
 import { DatePickerBase } from './DatePicker.base';
-import { getStyles } from './DatePicker.styles';
+import { styles } from './DatePicker.styles';
 
 /**
  * DatePicker description
  */
 export const DatePicker = styled<IDatePickerProps, IDatePickerStyleProps, IDatePickerStyles>(
   DatePickerBase,
-  getStyles,
+  styles,
   undefined,
   { scope: 'DatePicker' }
 );
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts
index c00690940f0bd..6cdc3bf488032 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts
@@ -275,6 +275,9 @@ export interface IDatePickerStyleProps {
   className?: string;
 
   // Insert DatePicker style props below
+  disabled?: boolean;
+  label?: boolean;
+  isDatePickerShown?: boolean;
 }
 
 export interface IDatePickerStyles {
@@ -282,6 +285,7 @@ export interface IDatePickerStyles {
    * Style for the root element.
    */
   root: IStyle;
-
-  // Insert DatePicker classNames below
+  textField: IStyle;
+  callout: IStyle;
+  icon: IStyle;
 }
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
index a883cf7ee0b1d..a1a274c73e9b3 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -2,7 +2,20 @@
 
 exports[`DatePicker renders default DatePicker correctly 1`] = `
 <div
-  className="ms-DatePicker"
+  className=
+      ms-DatePicker
+      {
+        box-shadow: none;
+        box-sizing: border-box;
+        margin-bottom: 0px;
+        margin-left: 0px;
+        margin-right: 0px;
+        margin-top: 0px;
+        padding-bottom: 0px;
+        padding-left: 0px;
+        padding-right: 0px;
+        padding-top: 0px;
+      }
 >
   <div>
     <div
@@ -40,14 +53,23 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
             aria-hidden={true}
             className=
                 ms-DatePicker-event--without-label
+                msDatePickerDisabled
                 {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  cursor: pointer;
                   display: inline-block;
                   font-family: "FabricMDL2Icons";
+                  font-size: 16px;
                   font-style: normal;
                   font-weight: normal;
+                  line-height: 18px;
+                  pointer-events: initial;
+                  position: absolute;
+                  right: 9px;
                   speak: none;
+                  top: 7px;
                 }
             data-icon-name="Calendar"
             onClick={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Basic.Example.tsx.shot
index 101eb8a5e01e2..336b49bb283ef 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Basic.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Basic.Example.tsx.shot
@@ -5,7 +5,20 @@ exports[`Component Examples renders DatePicker.Basic.Example.tsx correctly 1`] =
   className="docs-DatePickerExample"
 >
   <div
-    className="ms-DatePicker"
+    className=
+        ms-DatePicker
+        {
+          box-shadow: none;
+          box-sizing: border-box;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+        }
   >
     <div>
       <div
@@ -43,14 +56,23 @@ exports[`Component Examples renders DatePicker.Basic.Example.tsx correctly 1`] =
               aria-hidden={true}
               className=
                   ms-DatePicker-event--without-label
+                  msDatePickerDisabled
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    cursor: pointer;
                     display: inline-block;
                     font-family: "FabricMDL2Icons";
+                    font-size: 16px;
                     font-style: normal;
                     font-weight: normal;
+                    line-height: 18px;
+                    pointer-events: initial;
+                    position: absolute;
+                    right: 9px;
                     speak: none;
+                    top: 7px;
                   }
               data-icon-name="Calendar"
               onClick={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Bounded.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Bounded.Example.tsx.shot
index f2f44c7eac4d5..a3ab4ce006957 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Bounded.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Bounded.Example.tsx.shot
@@ -8,7 +8,20 @@ exports[`Component Examples renders DatePicker.Bounded.Example.tsx correctly 1`]
     When date boundaries are set (via minDate and maxDate props) the DatePicker will not allow out-of-bounds dates to be picked or entered. In this example, the allowed dates are 2018-5-13-2018-5-13
   </p>
   <div
-    className="ms-DatePicker"
+    className=
+        ms-DatePicker
+        {
+          box-shadow: none;
+          box-sizing: border-box;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+        }
   >
     <div>
       <div
@@ -46,14 +59,23 @@ exports[`Component Examples renders DatePicker.Bounded.Example.tsx correctly 1`]
               aria-hidden={true}
               className=
                   ms-DatePicker-event--without-label
+                  msDatePickerDisabled
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    cursor: pointer;
                     display: inline-block;
                     font-family: "FabricMDL2Icons";
+                    font-size: 16px;
                     font-style: normal;
                     font-weight: normal;
+                    line-height: 18px;
+                    pointer-events: initial;
+                    position: absolute;
+                    right: 9px;
                     speak: none;
+                    top: 7px;
                   }
               data-icon-name="Calendar"
               onClick={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Format.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Format.Example.tsx.shot
index 7e9c149b64be3..a8534a2079523 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Format.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Format.Example.tsx.shot
@@ -8,7 +8,20 @@ exports[`Component Examples renders DatePicker.Format.Example.tsx correctly 1`]
     Applications can customize how dates are formatted and parsed. Formatted dates can be ambiguous, so the control will avoid parsing the formatted strings of dates selected using the UI when text input is allowed. In this example, we are formatting and parsing dates as dd/MM/yy.
   </p>
   <div
-    className="ms-DatePicker"
+    className=
+        ms-DatePicker
+        {
+          box-shadow: none;
+          box-sizing: border-box;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+        }
   >
     <div>
       <div
@@ -69,13 +82,22 @@ exports[`Component Examples renders DatePicker.Format.Example.tsx correctly 1`]
               aria-hidden={true}
               className=
                   ms-DatePicker-event--with-label
+                  msDatePickerDisabled
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
+                    bottom: 5px;
+                    color: #666666;
+                    cursor: pointer;
                     display: inline-block;
                     font-family: "FabricMDL2Icons";
+                    font-size: 16px;
                     font-style: normal;
                     font-weight: normal;
+                    line-height: 18px;
+                    pointer-events: initial;
+                    position: absolute;
+                    right: 9px;
                     speak: none;
                   }
               data-icon-name="Calendar"
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Input.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Input.Example.tsx.shot
index c1d4a69433ec7..fa69c391f3199 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Input.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Input.Example.tsx.shot
@@ -8,7 +8,20 @@ exports[`Component Examples renders DatePicker.Input.Example.tsx correctly 1`] =
     Text input allowed by default when use keyboard navigation. Mouse click the TextField will popup DatePicker, click the TextField again will dismiss the DatePicker and allow text input.
   </p>
   <div
-    className="ms-DatePicker"
+    className=
+        ms-DatePicker
+        {
+          box-shadow: none;
+          box-sizing: border-box;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+        }
   >
     <div>
       <div
@@ -69,13 +82,22 @@ exports[`Component Examples renders DatePicker.Input.Example.tsx correctly 1`] =
               aria-hidden={true}
               className=
                   ms-DatePicker-event--with-label
+                  msDatePickerDisabled
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
+                    bottom: 5px;
+                    color: #666666;
+                    cursor: pointer;
                     display: inline-block;
                     font-family: "FabricMDL2Icons";
+                    font-size: 16px;
                     font-style: normal;
                     font-weight: normal;
+                    line-height: 18px;
+                    pointer-events: initial;
+                    position: absolute;
+                    right: 9px;
                     speak: none;
                   }
               data-icon-name="Calendar"
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Required.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Required.Example.tsx.shot
index 6433f25550e17..c2953a9235a79 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Required.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Required.Example.tsx.shot
@@ -8,7 +8,20 @@ exports[`Component Examples renders DatePicker.Required.Example.tsx correctly 1`
     Validation will happen when Date Picker loses focus.
   </p>
   <div
-    className="ms-DatePicker"
+    className=
+        ms-DatePicker
+        {
+          box-shadow: none;
+          box-sizing: border-box;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+        }
   >
     <div>
       <div
@@ -69,13 +82,22 @@ exports[`Component Examples renders DatePicker.Required.Example.tsx correctly 1`
               aria-hidden={true}
               className=
                   ms-DatePicker-event--with-label
+                  msDatePickerDisabled
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
+                    bottom: 5px;
+                    color: #666666;
+                    cursor: pointer;
                     display: inline-block;
                     font-family: "FabricMDL2Icons";
+                    font-size: 16px;
                     font-style: normal;
                     font-weight: normal;
+                    line-height: 18px;
+                    pointer-events: initial;
+                    position: absolute;
+                    right: 9px;
                     speak: none;
                   }
               data-icon-name="Calendar"
@@ -90,7 +112,20 @@ exports[`Component Examples renders DatePicker.Required.Example.tsx correctly 1`
     </div>
   </div>
   <div
-    className="ms-DatePicker"
+    className=
+        ms-DatePicker
+        {
+          box-shadow: none;
+          box-sizing: border-box;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+        }
   >
     <div>
       <div
@@ -128,14 +163,23 @@ exports[`Component Examples renders DatePicker.Required.Example.tsx correctly 1`
               aria-hidden={true}
               className=
                   ms-DatePicker-event--without-label
+                  msDatePickerDisabled
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    cursor: pointer;
                     display: inline-block;
                     font-family: "FabricMDL2Icons";
+                    font-size: 16px;
                     font-style: normal;
                     font-weight: normal;
+                    line-height: 18px;
+                    pointer-events: initial;
+                    position: absolute;
+                    right: 9px;
                     speak: none;
+                    top: 7px;
                   }
               data-icon-name="Calendar"
               onClick={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.WeekNumbers.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.WeekNumbers.Example.tsx.shot
index 8a75d98bed65c..9d4080fd73999 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.WeekNumbers.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.WeekNumbers.Example.tsx.shot
@@ -5,7 +5,20 @@ exports[`Component Examples renders DatePicker.WeekNumbers.Example.tsx correctly
   className="docs-DatePickerExample"
 >
   <div
-    className="ms-DatePicker"
+    className=
+        ms-DatePicker
+        {
+          box-shadow: none;
+          box-sizing: border-box;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+        }
   >
     <div>
       <div
@@ -43,14 +56,23 @@ exports[`Component Examples renders DatePicker.WeekNumbers.Example.tsx correctly
               aria-hidden={true}
               className=
                   ms-DatePicker-event--without-label
+                  msDatePickerDisabled
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    cursor: pointer;
                     display: inline-block;
                     font-family: "FabricMDL2Icons";
+                    font-size: 16px;
                     font-style: normal;
                     font-weight: normal;
+                    line-height: 18px;
+                    pointer-events: initial;
+                    position: absolute;
+                    right: 9px;
                     speak: none;
+                    top: 7px;
                   }
               data-icon-name="Calendar"
               onClick={[Function]}