Update angular-bootstrap DatePicker with UI Framework classes. (#11378) (#11416)

* Add DatePicker component to UI Framework.
- Update angular-bootstrap date-picker to use these classes.

src/ui/public/angular-bootstrap/datepicker/day.html

@@ -1,20 +1,83 @@
-<table role="grid" aria-labelledby="{{uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
+<table
+  class="kuiDatePicker"
+  role="grid"
+  aria-labelledby="{{uniqueId}}-title"
+  aria-activedescendant="{{activeDateId}}"
+>
   <thead>
     <tr>
-      <th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
-      <th colspan="{{5 + showWeeks}}"><button id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
-      <th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
+      <th
+        class="kuiDatePickerNavigationCell"
+        colspan="{{7 + showWeeks}}"
+      >
+        <div class="kuiDatePickerNavigation">
+          <button
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            ng-click="move(-1)"
+            tabindex="-1"
+          >
+            <span class="kuiIcon fa-chevron-left"></span>
+          </button>
+
+          <button
+            id="{{uniqueId}}-title"
+            role="heading"
+            aria-live="assertive"
+            aria-atomic="true"
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            ng-click="toggleMode()"
+            tabindex="-1"
+          >
+            <strong>{{title}}</strong>
+          </button>
+
+          <button
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            ng-click="move(1)"
+            tabindex="-1"
+          >
+            <span class="kuiIcon fa-chevron-right"></span>
+          </button>
+        </div>
+      </th>
     </tr>
     <tr>
       <th ng-show="showWeeks" class="text-center"></th>
-      <th ng-repeat="label in labels track by $index" class="text-center"><small aria-label="{{label.full}}">{{label.abbr}}</small></th>
+      <th
+        ng-repeat="label in labels track by $index"
+        class="kuiDatePickerHeaderCell"
+      >
+        <small aria-label="{{label.full}}">{{label.abbr}}</small>
+      </th>
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat="row in rows track by $index">
-      <td ng-show="showWeeks" class="text-center h6"><em>{{ weekNumbers[$index] }}</em></td>
-      <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}">
-        <button type="button" style="width:100%;" class="btn btn-default btn-sm" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-muted': dt.secondary, 'text-info': dt.current}">{{dt.label}}</span></button>
+      <td ng-show="showWeeks">
+        <em>{{ weekNumbers[$index] }}</em>
+      </td>
+
+      <td
+        ng-repeat="dt in row track by dt.date"
+        class="kuiDatePickerRowCell"
+        ng-class="{'kuiDatePickerRowCell-isBlocked': dt.disabled && !dt.secondary}"
+        role="gridcell"
+        id="{{dt.uid}}"
+        aria-disabled="{{!!dt.disabled}}"
+      >
+        <button
+          type="button"
+          class="kuiDatePickerRowCellContent"
+          ng-class="{'kuiDatePickerRowCellContent-isSelected': dt.selected, 'kuiDatePickerRowCellContent-isCurrent': dt.current, 'kuiDatePickerRowCellContent-isOtherMonth': dt.secondary}"
+          ng-click="select(dt.date)"
+          ng-disabled="dt.disabled"
+          tabindex="-1"
+        >
+          <span>{{dt.label}}</span>
+        </button>
       </td>
     </tr>
   </tbody>

src/ui/public/angular-bootstrap/datepicker/month.html

@@ -1,15 +1,70 @@
-<table role="grid" aria-labelledby="{{uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
+<table
+  class="kuiDatePicker"
+  role="grid"
+  aria-labelledby="{{uniqueId}}-title"
+  aria-activedescendant="{{activeDateId}}"
+>
   <thead>
     <tr>
-      <th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
-      <th><button id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
-      <th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
+      <th
+        class="kuiDatePickerNavigationCell"
+        colspan="3"
+      >
+        <div class="kuiDatePickerNavigation">
+          <button
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            ng-click="move(-1)"
+            tabindex="-1"
+          >
+            <span class="kuiIcon fa-chevron-left"></span>
+          </button>
+
+          <button
+            id="{{uniqueId}}-title"
+            role="heading"
+            aria-live="assertive"
+            aria-atomic="true"
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            ng-click="toggleMode()"
+            tabindex="-1"
+          >
+            <strong>{{title}}</strong>
+          </button>
+
+          <button
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            ng-click="move(1)"
+            tabindex="-1"
+          >
+            <span class="kuiIcon fa-chevron-right"></span>
+          </button>
+        </div>
+      </th>
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat="row in rows track by $index">
-      <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}">
-        <button type="button" style="width:100%;" class="btn btn-default" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-info': dt.current}">{{dt.label}}</span></button>
+      <td
+        ng-repeat="dt in row track by dt.date"
+        class="kuiDatePickerRowCell"
+        ng-class="{'kuiDatePickerRowCell-isBlocked': dt.disabled && !dt.secondary}"
+        role="gridcell"
+        id="{{dt.uid}}"
+        aria-disabled="{{!!dt.disabled}}"
+      >
+        <button
+          type="button"
+          class="kuiDatePickerRowCellContent"
+          ng-class="{'kuiDatePickerRowCellContent-isSelected': dt.selected, 'kuiDatePickerRowCellContent-isCurrent': dt.current}"
+          ng-click="select(dt.date)"
+          ng-disabled="dt.disabled"
+          tabindex="-1"
+        >
+          <span>{{dt.label}}</span>
+        </button>
       </td>
     </tr>
   </tbody>

src/ui/public/angular-bootstrap/datepicker/year.html

@@ -1,15 +1,70 @@
-<table role="grid" aria-labelledby="{{uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
+<table
+  class="kuiDatePicker"
+  role="grid"
+  aria-labelledby="{{uniqueId}}-title"
+  aria-activedescendant="{{activeDateId}}"
+>
   <thead>
     <tr>
-      <th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
-      <th colspan="3"><button id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
-      <th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
+      <th
+        class="kuiDatePickerNavigationCell"
+        colspan="5"
+      >
+        <div class="kuiDatePickerNavigation">
+          <button
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            ng-click="move(-1)"
+            tabindex="-1"
+          >
+            <span class="kuiIcon fa-chevron-left"></span>
+          </button>
+
+          <button
+            id="{{uniqueId}}-title"
+            role="heading"
+            aria-live="assertive"
+            aria-atomic="true"
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            ng-click="toggleMode()"
+            tabindex="-1"
+          >
+            <strong>{{title}}</strong>
+          </button>
+
+          <button
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            ng-click="move(1)"
+            tabindex="-1"
+          >
+            <span class="kuiIcon fa-chevron-right"></span>
+          </button>
+        </div>
+      </th>
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat="row in rows track by $index">
-      <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}">
-        <button type="button" style="width:100%;" class="btn btn-default" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-info': dt.current}">{{dt.label}}</span></button>
+      <td
+        ng-repeat="dt in row track by dt.date"
+        class="kuiDatePickerRowCell"
+        ng-class="{'kuiDatePickerRowCell-isBlocked': dt.disabled && !dt.secondary}"
+        role="gridcell"
+        id="{{dt.uid}}"
+        aria-disabled="{{!!dt.disabled}}"
+      >
+        <button
+          type="button"
+          class="kuiDatePickerRowCellContent"
+          ng-class="{'kuiDatePickerRowCellContent-isSelected': dt.selected, 'kuiDatePickerRowCellContent-isCurrent': dt.current}"
+          ng-click="select(dt.date)"
+          ng-disabled="dt.disabled"
+          tabindex="-1"
+        >
+          <span>{{dt.label}}</span>
+        </button>
       </td>
     </tr>
   </tbody>

ui_framework/components/local_nav/_index.scss

@@ -17,6 +17,9 @@ $localTabTextColor-isSelected: $localNavButtonTextColor-isHover;
 $localBreadcrumbLinkColor: #328caa;
 $localSearchButtonBackgroundColor: #9c9c9c;
 $localSearchButtonTextColor: #ffffff;
+$localDatePickerButtonHoverBackgroundColor: $localNavButtonBackgroundColor-isHover;
+$localDatePickerCellSelectedBackgroundColor: #777777;
+$localDatePickerCellSelectedTextColor: #ffffff;
 
 // Dark theme colors
 $localNavTextColor--darkTheme: $globalTextColor--darkTheme;
@@ -37,14 +40,24 @@ $localTabTextColor-isHover--darkTheme: $localNavButtonTextColor-isHover--darkThe
 $localTabTextColor-isSelected--darkTheme: $localNavButtonTextColor-isHover--darkTheme;
 $localSearchButtonBackgroundColor--darkTheme: #777777;
 $localSearchButtonTextColor--darkTheme: #ffffff;
+$localDatePickerButtonHoverBackgroundColor--darkTheme: rgba(#000000, 0.4);
+$localDatePickerCellSelectedTextColor--darkTheme: #ffffff;
 
 // Spacing
 $localNavSideSpacing: 10px;
 $localSearchHeight: 30px;
+$localDatePickerBottomSpacing: 4px;
+$localDatePickerButtonPadding: 3px 6px;
+$localDatePickerCellPadding: 8px;
+// Match the height of body cells, but leave out side padding so content can expand without
+// affecting the cell's width.
+$localDatePickerHeaderCellPadding: #{$localDatePickerCellPadding + 1px} 0;
+$localDatePickerCellLineHeight: 1.2;
 
 // Fonts
 
 @import "local_breadcrumbs";
+@import "local_date_picker";
 @import "local_dropdown";
 @import "local_menu";
 @import "local_nav";

ui_framework/components/local_nav/_local_date_picker.scss

@@ -0,0 +1,159 @@
+.kuiDatePicker {
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+  line-height: $globalLineHeight;
+}
+
+.kuiDatePickerNavigationCell {
+  padding: 0;
+}
+
+.kuiDatePickerNavigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $localDatePickerBottomSpacing;
+}
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiDatePickerNavigationButton {
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  font-size: $globalSubTextFontSize;
+  color: $localNavButtonTextColor;
+  padding: $localDatePickerButtonPadding;
+  border-radius: $globalBorderRadius;
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+    color: $localNavButtonTextColor-isHover;
+    background-color: $localDatePickerButtonHoverBackgroundColor;
+  }
+
+  &:focus {
+    @include focus($globalFocusColor, $localDropdownBackgroundColor);
+
+    color: $localNavButtonTextColor; /* 1 */
+  }
+
+  @include darkTheme {
+    color: $localNavButtonTextColor--darkTheme;
+
+    &:hover,
+    &:active {
+      color: $localNavButtonTextColor-isHover--darkTheme;
+      background-color: $localDatePickerButtonHoverBackgroundColor--darkTheme;
+    }
+
+    &:focus {
+      @include focus($globalFocusColor, $localDropdownBackgroundColor--darkTheme);
+
+      color: $localNavButtonTextColor--darkTheme; /* 1 */
+    }
+  }
+}
+
+.kuiDatePickerHeaderCell {
+  padding: $localDatePickerHeaderCellPadding;
+  color: $localNavTextColor;
+  font-size: $globalSubTextFontSize;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1.2;
+
+  @include darkTheme {
+    color: $globalTextColor--darkTheme;
+  }
+}
+
+.kuiDatePickerRowCell {
+  padding: 0;
+  text-align: center;
+
+  /**
+   * This state class exists to support weird angular-bootstrap datepicker functionality,
+   * in which you can't select a day on the "From" calendar if it falls after the selected day in
+   * the "To" calendar (and vice versa, you can't select a "To" day if it is before the "From" day).
+   */
+  &.kuiDatePickerRowCell-isBlocked {
+    cursor: not-allowed;
+
+    .kuiDatePickerRowCellContent {
+      pointer-events: none;
+    }
+  }
+}
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiDatePickerRowCellContent {
+  appearance: none;
+  background-color: transparent;
+  width: 100%;
+  border: 1px solid transparent;
+  color: $localNavTextColor;
+  font-size: $globalSubTextFontSize;
+  padding: $localDatePickerCellPadding;
+  border-radius: $globalBorderRadius;
+  line-height: $localDatePickerCellLineHeight;
+
+  &:focus {
+    @include focus($globalFocusColor, $localDropdownBackgroundColor);
+
+    color: $localNavTextColor; /* 1 */
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &.kuiDatePickerRowCellContent-isOtherMonth {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &.kuiDatePickerRowCellContent-isCurrent {
+    color: $globalLinkColor;
+  }
+
+  &.kuiDatePickerRowCellContent-isSelected {
+    background-color: $localDatePickerCellSelectedBackgroundColor;
+    color: $localDatePickerCellSelectedTextColor;
+  }
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+    color: $localNavButtonTextColor-isHover;
+    background-color: $localDatePickerButtonHoverBackgroundColor;
+  }
+
+  @include darkTheme {
+    color: $globalTextColor--darkTheme;
+
+    &:focus {
+      @include focus($globalFocusColor, $localDropdownBackgroundColor--darkTheme);
+    }
+
+    &.kuiDatePickerRowCellContent-isCurrent {
+      color: $globalLinkColor--darkTheme;
+    }
+
+    &.kuiDatePickerRowCellContent-isSelected {
+      color: $localDatePickerCellSelectedTextColor--darkTheme;
+    }
+
+    &:hover,
+    &:active {
+      color: $localNavButtonTextColor-isHover--darkTheme;
+      background-color: $localDatePickerButtonHoverBackgroundColor--darkTheme;
+    }
+  }
+}

ui_framework/dist/ui_framework.css

@@ -1275,6 +1275,150 @@ body {
 .kuiLocalBreadcrumb__emphasis {
   font-weight: 700; }
 
+.kuiDatePicker {
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+  line-height: 1.5; }
+
+.kuiDatePickerNavigationCell {
+  padding: 0; }
+
+.kuiDatePickerNavigation {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin-bottom: 4px; }
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiDatePickerNavigationButton {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  border: none;
+  font-size: 12px;
+  color: #5a5a5a;
+  padding: 3px 6px;
+  border-radius: 4px; }
+  .kuiDatePickerNavigationButton:hover, .kuiDatePickerNavigationButton:active {
+    cursor: pointer;
+    color: #000000;
+    background-color: rgba(0, 0, 0, 0.1); }
+  .kuiDatePickerNavigationButton:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #f6f6f6, 0 0 0 2px #6EADC1;
+    /* 3 */
+    color: #5a5a5a;
+    /* 1 */ }
+  .theme-dark .kuiDatePickerNavigationButton {
+    color: #dedede; }
+    .theme-dark .kuiDatePickerNavigationButton:hover, .theme-dark .kuiDatePickerNavigationButton:active {
+      color: #ffffff;
+      background-color: rgba(0, 0, 0, 0.4); }
+    .theme-dark .kuiDatePickerNavigationButton:focus {
+      z-index: 1;
+      /* 1 */
+      outline: none !important;
+      /* 2 */
+      box-shadow: 0 0 0 1px #525252, 0 0 0 2px #6EADC1;
+      /* 3 */
+      color: #dedede;
+      /* 1 */ }
+
+.kuiDatePickerHeaderCell {
+  padding: 9px 0;
+  color: #2d2d2d;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1.2; }
+  .theme-dark .kuiDatePickerHeaderCell {
+    color: #cecece; }
+
+.kuiDatePickerRowCell {
+  padding: 0;
+  text-align: center;
+  /**
+   * This state class exists to support weird angular-bootstrap datepicker functionality,
+   * in which you can't select a day on the "From" calendar if it falls after the selected day in
+   * the "To" calendar (and vice versa, you can't select a "To" day if it is before the "From" day).
+   */ }
+  .kuiDatePickerRowCell.kuiDatePickerRowCell-isBlocked {
+    cursor: not-allowed; }
+    .kuiDatePickerRowCell.kuiDatePickerRowCell-isBlocked .kuiDatePickerRowCellContent {
+      pointer-events: none; }
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiDatePickerRowCellContent {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  width: 100%;
+  border: 1px solid transparent;
+  color: #2d2d2d;
+  font-size: 12px;
+  padding: 8px;
+  border-radius: 4px;
+  line-height: 1.2; }
+  .kuiDatePickerRowCellContent:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #f6f6f6, 0 0 0 2px #6EADC1;
+    /* 3 */
+    color: #2d2d2d;
+    /* 1 */ }
+  .kuiDatePickerRowCellContent:disabled {
+    pointer-events: none;
+    opacity: 0.5; }
+  .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isOtherMonth {
+    visibility: hidden;
+    pointer-events: none; }
+  .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent {
+    color: #3CAED2; }
+  .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected {
+    background-color: #777777;
+    color: #ffffff; }
+  .kuiDatePickerRowCellContent:hover, .kuiDatePickerRowCellContent:active {
+    cursor: pointer;
+    color: #000000;
+    background-color: rgba(0, 0, 0, 0.1); }
+  .theme-dark .kuiDatePickerRowCellContent {
+    color: #cecece; }
+    .theme-dark .kuiDatePickerRowCellContent:focus {
+      z-index: 1;
+      /* 1 */
+      outline: none !important;
+      /* 2 */
+      box-shadow: 0 0 0 1px #525252, 0 0 0 2px #6EADC1;
+      /* 3 */ }
+    .theme-dark .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent {
+      color: #b7e2ea; }
+    .theme-dark .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected {
+      color: #ffffff; }
+    .theme-dark .kuiDatePickerRowCellContent:hover, .theme-dark .kuiDatePickerRowCellContent:active {
+      color: #ffffff;
+      background-color: rgba(0, 0, 0, 0.4); }
+
 .kuiLocalDropdown {
   position: relative;
   padding: 10px 10px 14px;

ui_framework/doc_site/src/views/local_nav/local_nav_date_picker.html

@@ -0,0 +1,375 @@
+<div class="kuiLocalDropdown">
+  <table class="kuiDatePicker">
+    <thead>
+      <th class="kuiDatePickerNavigationCell" colspan="7">
+        <div class="kuiDatePickerNavigation">
+          <button
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            tabindex="-1"
+          >
+            <span class="kuiIcon fa-chevron-left"></span>
+          </button>
+
+          <button
+            role="heading"
+            aria-live="assertive"
+            aria-atomic="true"
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            tabindex="-1"
+          >
+            <strong>March 2017</strong>
+          </button>
+
+          <button
+            type="button"
+            class="kuiDatePickerNavigationButton"
+            tabindex="-1"
+          >
+            <span class="kuiIcon fa-chevron-right"></span>
+          </button>
+        </div>
+      </th>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="kuiDatePickerHeaderCell">Sun</th>
+        <td class="kuiDatePickerHeaderCell">Mon</th>
+        <td class="kuiDatePickerHeaderCell">Tue</th>
+        <td class="kuiDatePickerHeaderCell">Wed</th>
+        <td class="kuiDatePickerHeaderCell">Thu</th>
+        <td class="kuiDatePickerHeaderCell">Fri</th>
+        <td class="kuiDatePickerHeaderCell">Sat</th>
+      </tr>
+      <tr>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent kuiDatePickerRowCellContent-isOtherMonth"
+            tabindex="-1"
+          >
+            <span>27</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent kuiDatePickerRowCellContent-isOtherMonth"
+            tabindex="-1"
+          >
+            <span>28</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent kuiDatePickerRowCellContent-isOtherMonth"
+            tabindex="-1"
+          >
+            <span>29</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>1</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>2</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>3</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>4</span>
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>5</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>6</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>7</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>8</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>9</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>10</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>11</span>
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>12</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>13</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>14</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>15</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>16</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent kuiDatePickerRowCellContent-isSelected"
+            tabindex="-1"
+          >
+            <span>17</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>18</span>
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>19</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>20</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent kuiDatePickerRowCellContent kuiDatePickerRowCellContent-isCurrent"
+            tabindex="-1"
+          >
+            <span>21</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>22</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>23</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>24</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>25</span>
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>26</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>27</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>28</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+          >
+            <span>29</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell kuiDatePickerRowCell-isBlocked">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+            disabled
+          >
+            <span>30</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell kuiDatePickerRowCell-isBlocked">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent"
+            tabindex="-1"
+            disabled
+          >
+            <span>31</span>
+          </button>
+        </td>
+        <td class="kuiDatePickerRowCell">
+          <button
+            type="button"
+            class="kuiDatePickerRowCellContent kuiDatePickerRowCellContent-isOtherMonth"
+            tabindex="-1"
+          >
+            <span>1</span>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  </div>
+</div>

ui_framework/doc_site/src/views/local_nav/local_nav_example.js

@@ -16,6 +16,7 @@ const menuItemStatesHtml = require('./local_nav_menu_item_states.html');
 const dropdownHtml = require('./local_nav_dropdown.html');
 const dropdownPanelsHtml = require('./local_nav_dropdown_panels.html');
 const tabsHtml = require('./local_nav_tabs.html');
+const datePickerHtml = require('./local_nav_date_picker.html');
 
 export default props => (
   <GuidePage title={props.route.name}>
@@ -186,6 +187,23 @@ export default props => (
         isDarkTheme={true}
       />
     </GuideSection>
+
+    <GuideSection
+      title="DatePicker"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: datePickerHtml,
+      }]}
+    >
+      <GuideDemo
+        html={datePickerHtml}
+      />
+
+      <GuideDemo
+        html={datePickerHtml}
+        isDarkTheme={true}
+      />
+    </GuideSection>
   </GuidePage>
 );