Date Picker

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="DayPicker" role="application" lang="en">
    <div class="DayPicker-wrapper" tabindex="0">
        <div class="DayPicker-NavBar">
            <span tabindex="0" role="button" aria-label="Previous Month" class="DayPicker-NavButton DayPicker-NavButton--prev"></span>
            <span tabindex="0" role="button" aria-label="Next Month" class="DayPicker-NavButton DayPicker-NavButton--next"></span>
        </div>
        <div class="DayPicker-Month" role="grid">
            <div class="DayPicker-Caption" role="heading">
                <div>July 2017</div>
            </div>
            <div class="DayPicker-Weekdays" role="rowgroup">
                <div class="DayPicker-WeekdaysRow" role="row">
                    <div class="DayPicker-Weekday" role="columnheader">
                        <abbr title="Sunday">Su</abbr>
                    </div>
                    <div class="DayPicker-Weekday" role="columnheader">
                        <abbr title="Monday">Mo</abbr>
                    </div>
                    <div class="DayPicker-Weekday" role="columnheader">
                        <abbr title="Tuesday">Tu</abbr>
                    </div>
                    <div class="DayPicker-Weekday" role="columnheader">
                        <abbr title="Wednesday">We</abbr>
                    </div>
                    <div class="DayPicker-Weekday" role="columnheader">
                        <abbr title="Thursday">Th</abbr>
                    </div>
                    <div class="DayPicker-Weekday" role="columnheader">
                        <abbr title="Friday">Fr</abbr>
                    </div>
                    <div class="DayPicker-Weekday" role="columnheader">
                        <abbr title="Saturday">Sa</abbr>
                    </div>
                </div>
            </div>
            <div class="DayPicker-Body" role="rowgroup">
                <div class="DayPicker-Week" role="row">
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                    <div class="DayPicker-Day" tabindex="0" role="gridcell" aria-label="Sat Jul 01 2017" aria-disabled="false" aria-selected="false">1</div>
                </div>
                <div class="DayPicker-Week" role="row">
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 02 2017" aria-disabled="false" aria-selected="false">2</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 03 2017" aria-disabled="false" aria-selected="false">3</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 04 2017" aria-disabled="false" aria-selected="false">4</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 05 2017" aria-disabled="false" aria-selected="false">5</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 06 2017" aria-disabled="false" aria-selected="false">6</div>
                    <div class="DayPicker-Day DayPicker-Day--today" tabindex="-1" role="gridcell" aria-label="Fri Jul 07 2017" aria-disabled="false" aria-selected="false">7</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 08 2017" aria-disabled="false" aria-selected="false">8</div>
                </div>
                <div class="DayPicker-Week" role="row">
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 09 2017" aria-disabled="false" aria-selected="false">9</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 10 2017" aria-disabled="false" aria-selected="false">10</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 11 2017" aria-disabled="false" aria-selected="false">11</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 12 2017" aria-disabled="false" aria-selected="false">12</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 13 2017" aria-disabled="false" aria-selected="false">13</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Fri Jul 14 2017" aria-disabled="false" aria-selected="false">14</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 15 2017" aria-disabled="false" aria-selected="false">15</div>
                </div>
                <div class="DayPicker-Week" role="row">
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 16 2017" aria-disabled="false" aria-selected="false">16</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 17 2017" aria-disabled="false" aria-selected="false">17</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 18 2017" aria-disabled="false" aria-selected="false">18</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 19 2017" aria-disabled="false" aria-selected="false">19</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 20 2017" aria-disabled="false" aria-selected="false">20</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Fri Jul 21 2017" aria-disabled="false" aria-selected="false">21</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 22 2017" aria-disabled="false" aria-selected="false">22</div>
                </div>
                <div class="DayPicker-Week" role="row">
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 23 2017" aria-disabled="false" aria-selected="false">23</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 24 2017" aria-disabled="false" aria-selected="false">24</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 25 2017" aria-disabled="false" aria-selected="false">25</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 26 2017" aria-disabled="false" aria-selected="false">26</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 27 2017" aria-disabled="false" aria-selected="false">27</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Fri Jul 28 2017" aria-disabled="false" aria-selected="false">28</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 29 2017" aria-disabled="false" aria-selected="false">29</div>
                </div>
                <div class="DayPicker-Week" role="row">
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 30 2017" aria-disabled="false" aria-selected="false">30</div>
                    <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 31 2017" aria-disabled="false" aria-selected="false">31</div>
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                    <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
                </div>
            </div>
        </div>
    </div>
</div>


        <div class="DayPicker" role="application" lang="en">
  <div class="DayPicker-wrapper" tabindex="0">
    <div class="DayPicker-NavBar">
      <span tabindex="0" role="button" aria-label="Previous Month" class="DayPicker-NavButton DayPicker-NavButton--prev"></span>
      <span tabindex="0" role="button" aria-label="Next Month" class="DayPicker-NavButton DayPicker-NavButton--next"></span>
    </div>
    <div class="DayPicker-Month" role="grid">
      <div class="DayPicker-Caption" role="heading">
        <div>July 2017</div>
      </div>
      <div class="DayPicker-Weekdays" role="rowgroup">
        <div class="DayPicker-WeekdaysRow" role="row">
          <div class="DayPicker-Weekday" role="columnheader">
            <abbr title="Sunday">Su</abbr>
          </div>
          <div class="DayPicker-Weekday" role="columnheader">
            <abbr title="Monday">Mo</abbr>
          </div>
          <div class="DayPicker-Weekday" role="columnheader">
            <abbr title="Tuesday">Tu</abbr>
          </div>
          <div class="DayPicker-Weekday" role="columnheader">
            <abbr title="Wednesday">We</abbr>
          </div>
          <div class="DayPicker-Weekday" role="columnheader">
            <abbr title="Thursday">Th</abbr>
          </div>
          <div class="DayPicker-Weekday" role="columnheader">
            <abbr title="Friday">Fr</abbr>
          </div>
          <div class="DayPicker-Weekday" role="columnheader">
            <abbr title="Saturday">Sa</abbr>
          </div>
        </div>
      </div>
      <div class="DayPicker-Body" role="rowgroup">
        <div class="DayPicker-Week" role="row">
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
          <div class="DayPicker-Day" tabindex="0" role="gridcell" aria-label="Sat Jul 01 2017" aria-disabled="false" aria-selected="false">1</div>
        </div>
        <div class="DayPicker-Week" role="row">
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 02 2017" aria-disabled="false" aria-selected="false">2</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 03 2017" aria-disabled="false" aria-selected="false">3</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 04 2017" aria-disabled="false" aria-selected="false">4</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 05 2017" aria-disabled="false" aria-selected="false">5</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 06 2017" aria-disabled="false" aria-selected="false">6</div>
          <div class="DayPicker-Day DayPicker-Day--today" tabindex="-1" role="gridcell" aria-label="Fri Jul 07 2017" aria-disabled="false" aria-selected="false">7</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 08 2017" aria-disabled="false" aria-selected="false">8</div>
        </div>
        <div class="DayPicker-Week" role="row">
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 09 2017" aria-disabled="false" aria-selected="false">9</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 10 2017" aria-disabled="false" aria-selected="false">10</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 11 2017" aria-disabled="false" aria-selected="false">11</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 12 2017" aria-disabled="false" aria-selected="false">12</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 13 2017" aria-disabled="false" aria-selected="false">13</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Fri Jul 14 2017" aria-disabled="false" aria-selected="false">14</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 15 2017" aria-disabled="false" aria-selected="false">15</div>
        </div>
        <div class="DayPicker-Week" role="row">
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 16 2017" aria-disabled="false" aria-selected="false">16</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 17 2017" aria-disabled="false" aria-selected="false">17</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 18 2017" aria-disabled="false" aria-selected="false">18</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 19 2017" aria-disabled="false" aria-selected="false">19</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 20 2017" aria-disabled="false" aria-selected="false">20</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Fri Jul 21 2017" aria-disabled="false" aria-selected="false">21</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 22 2017" aria-disabled="false" aria-selected="false">22</div>
        </div>
        <div class="DayPicker-Week" role="row">
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 23 2017" aria-disabled="false" aria-selected="false">23</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 24 2017" aria-disabled="false" aria-selected="false">24</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Tue Jul 25 2017" aria-disabled="false" aria-selected="false">25</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Wed Jul 26 2017" aria-disabled="false" aria-selected="false">26</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Thu Jul 27 2017" aria-disabled="false" aria-selected="false">27</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Fri Jul 28 2017" aria-disabled="false" aria-selected="false">28</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sat Jul 29 2017" aria-disabled="false" aria-selected="false">29</div>
        </div>
        <div class="DayPicker-Week" role="row">
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Sun Jul 30 2017" aria-disabled="false" aria-selected="false">30</div>
          <div class="DayPicker-Day" tabindex="-1" role="gridcell" aria-label="Mon Jul 31 2017" aria-disabled="false" aria-selected="false">31</div>
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
          <div aria-disabled="true" class="DayPicker-Day DayPicker-Day--outside"></div>
        </div>
      </div>
    </div>
  </div>
</div>


        
            
            /* No context defined for this component. */

File:

Content:


                                /* DayPicker styles */
.date-picker {
  display: flex;
  justify-content: center;
}

.DayPicker {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

.DayPicker-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  position: relative;
  padding: 0 0 1rem;
  user-select: none;
}

.DayPicker-Month {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  user-select: none;
  margin: 0 1rem;

  @include breakpoint($break-small) {
    margin: 0;
  }
}

.DayPicker-NavBar {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 0.5rem;
}

.DayPicker-NavButton {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

.DayPicker-NavButton--prev {
  left: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23727272%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22bevel%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M37%2015L20%2032l17%2017%22/%3E%3C/svg%3E");

  @include breakpoint($break-small) {
    left: 0;
  }
}

.DayPicker-NavButton--next {
  right: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23727272%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22bevel%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M37%2015L20%2032l17%2017%22/%3E%3C/svg%3E");
  transform: rotate(180deg);

  @include breakpoint($break-small) {
    right: 0;
  }
}

.DayPicker-NavButton--interactionDisabled {
  display: none;
}

.DayPicker-Caption {
  display: table-caption;
  height: 1.5rem;
  font-family: $font-title;
  text-align: center;
}

.DayPicker-Weekdays {
  display: table-header-group;
}

.DayPicker-WeekdaysRow {
  display: table-row;
}

.DayPicker-Weekday {
  display: table-cell;
  padding: 0.5rem;
  font-size: $ms-neg-1;
  text-align: center;
  color: $color-gray-light;
}

abbr {
  .DayPicker-Weekday & {
    text-decoration: none;
  }
}

.DayPicker-Body {
  display: table-row-group;
}

.DayPicker-Week {
  display: table-row;
}

.DayPicker-Day {
  display: table-cell;
  padding: 0.5rem;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid $color-gray-lightest;
  text-align: center;
  background: $color-white;

  &:hover {
    background: $color-primary-light;
    color: $color-white;
  }
}

.DayPicker-WeekNumber {
  display: table-cell;
  padding: 0.5rem;
  min-width: 1rem;
  vertical-align: middle;
  cursor: pointer;
  font-size: $ms-neg-1;
  text-align: right;
  color: $color-text;
}

.DayPicker--interactionDisabled .DayPicker-Day {
  cursor: default;
}

/* Default modifiers */

.DayPicker-Day--today {
  background: $color-gray-lightest;
}

.DayPicker-Day--disabled {
  color: #dce0e0;
  cursor: default;
  background-color: #eff1f1;
}

.DayPicker-Day--outside {
  cursor: default;

  &:hover {
    background: $color-white;
  }
}

/* DayPickerInput */
.DayPickerInput {
  display: inline-block;
}

.DayPickerInput-OverlayWrapper {
  position: relative;
}

.DayPickerInput-Overlay {
  left: 0;
  position: absolute;
  background: $color-background;
  box-shadow: 0 0.13rem 0.31rem rgba($color-black, .15);
}

URL: /components/raw/date-picker/Date-Picker.scss
Filesystem Path: src/components/01-Units/Date Picker/Date-Picker.scss
Size: 3.5 KB

Handle: @date-picker
Preview:
- With layout
- Component only
Filesystem Path: src/components/01-Units/Date Picker/Date Picker.html
Referenced by (1): @show-filter

The Date Picker component uses the markup from react-day-picker. Only the styles are modified.

Date Picker

Ads

Buttons

Form Elements

Input

Label

Radio

Select

Icons

Images

Thumbnails

Links

Call Link

Lists

Logos

Notices

Tags

Text Blocks

Byline

Type

Titles

Header

Ad Blocks

Banners

Footer

Forms

Show Console

Large Show Console

Small Show Console

Show Listing

Article

Guide Page

Home Page

Show Page