@momentum-ui/react-collaboration/scss/components/date-range-picker/examples/default.html

Cisco Momentum UI Framework for React Collaboration Applications

<div class='md-event-overlay md-datepicker-container '>
  <div class='md-event-overlay__children md-date-range-picker'>
    <div class="md-datepicker__month-container md-date-picker">
      <div class="md-datepicker__header">
        <div class="md-datepicker__navigation">
          <div class="md-datepicker__navigation--current-month">November 2018</div>
          <div class="md-datepicker__navigation--buttons">
            <button class="md-button md-button--36 md-button--icon" alt="previous" type="button" aria-label="previous">
              <span class="md-button__children"> <i class="md-icon icon icon-arrow-left_16"></i> </span>
            </button>
            <button class="md-button md-button--36 md-button--icon" alt="next" type="button" aria-label="next">
              <span class="md-button__children"> <i class="md-icon icon icon-arrow-right_16"></i> </span>
            </button>
          </div>
        </div>
        <div class="md-datepicker__day--names">
          <div class="md-datepicker__day--name">S</div><div class="md-datepicker__day--name">M</div><div class="md-datepicker__day--name">T</div><div class="md-datepicker__day--name">W</div><div class="md-datepicker__day--name">T</div><div class="md-datepicker__day--name">F</div><div class="md-datepicker__day--name">S</div>
        </div>
      </div>
      <div class="md-datepicker__month">
        <div class="md-datepicker__week">
          <button class="md-button md-button--circle md-button--28 md-datepicker__day md-datepicker__day--outside-month" alt="28" type="button" aria-label="28" aria-selected="false">
            <span class="md-button__children">28</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day md-datepicker__day--outside-month" alt="29" type="button" aria-label="29" aria-selected="false">
            <span class="md-button__children">29</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day md-datepicker__day--outside-month" alt="30" type="button" aria-label="30" aria-selected="false">
            <span class="md-button__children">30</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day md-datepicker__day--outside-month" alt="31" type="button" aria-label="31" aria-selected="false">
            <span class="md-button__children">31</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="1" type="button" aria-label="1" aria-selected="false">
            <span class="md-button__children">1</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="2" type="button" aria-label="2" aria-selected="false">
            <span class="md-button__children">2</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="3" type="button" aria-label="3" aria-selected="false">
            <span class="md-button__children">3</span>
          </button>
        </div>
        <div class="md-datepicker__week">
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="4" type="button" aria-label="4" aria-selected="false">
            <span class="md-button__children">4</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="5" type="button" aria-label="5" aria-selected="false">
            <span class="md-button__children">5</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="6" type="button" aria-label="6" aria-selected="false">
            <span class="md-button__children">6</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="7" type="button" aria-label="7" aria-selected="false">
            <span class="md-button__children">7</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="8" type="button" aria-label="8" aria-selected="false">
            <span class="md-button__children">8</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="9" type="button" aria-label="9" aria-selected="false">
            <span class="md-button__children">9</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="10" type="button" aria-label="10" aria-selected="false">
            <span class="md-button__children">10</span>
          </button>
        </div>
        <div class="md-datepicker__week">
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="11" type="button" aria-label="11" aria-selected="false">
            <span class="md-button__children">11</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="12" type="button" aria-label="12" aria-selected="false">
            <span class="md-button__children">12</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="13" type="button" aria-label="13" aria-selected="false">
            <span class="md-button__children">13</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="14" type="button" aria-label="14" aria-selected="false">
            <span class="md-button__children">14</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="15" type="button" aria-label="15" aria-selected="false">
            <span class="md-button__children">15</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="16" type="button" aria-label="16" aria-selected="false">
            <span class="md-button__children">16</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="17" type="button" aria-label="17" aria-selected="false">
            <span class="md-button__children">17</span>
          </button>
        </div>
        <div class="md-datepicker__week">
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="18" type="button" aria-label="18" aria-selected="false">
            <span class="md-button__children">18</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="19" type="button" aria-label="19" aria-selected="false">
            <span class="md-button__children">19</span>
          </button>
          <button
            class="md-button md-button--circle md-button--28 md-datepicker__day md-datepicker__day--selected md-datepicker__day--focus"
            alt="20"
            type="button"
            aria-label="20"
            aria-selected="true"
          >
            <span class="md-button__children">20</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day md-datepicker__day--today" alt="21" type="button" aria-label="21" aria-selected="false">
            <span class="md-button__children">21</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="22" type="button" aria-label="22" aria-selected="false">
            <span class="md-button__children">22</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="23" type="button" aria-label="23" aria-selected="false">
            <span class="md-button__children">23</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="24" type="button" aria-label="24" aria-selected="false">
            <span class="md-button__children">24</span>
          </button>
        </div>
        <div class="md-datepicker__week">
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="25" type="button" aria-label="25" aria-selected="false">
            <span class="md-button__children">25</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="26" type="button" aria-label="26" aria-selected="false">
            <span class="md-button__children">26</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="27" type="button" aria-label="27" aria-selected="false">
            <span class="md-button__children">27</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="28" type="button" aria-label="28" aria-selected="false">
            <span class="md-button__children">28</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="29" type="button" aria-label="29" aria-selected="false">
            <span class="md-button__children">29</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day" alt="30" type="button" aria-label="30" aria-selected="false">
            <span class="md-button__children">30</span>
          </button>
          <button class="md-button md-button--circle md-button--28 md-datepicker__day md-datepicker__day--outside-month" alt="1" type="button" aria-label="1" aria-selected="false">
            <span class="md-button__children">1</span>
          </button>
        </div>
      </div>
    </div>
    <div class='md-data-range-picker-button-group'>
      <div class='md-input-container small-5 columns'>
        <label class="md-label" for="dateRangeInput">Start Date</label>
        <div class="md-input__icon-container">
          <input type="text"
            class="md-input dirty"
            tabIndex="0"
            value=""
            placeholder="Start Date"
            readonly />
          <button
            type="button"
            style="display:none;"
            class="md-button md-button--36 md-button--icon"
            alt="clear input"
            type="button"
            tabIndex="-1">
            <span class="md-button__children">
              <i class="icon icon-clear-active_16"></i>
            </span>
          </button>
        </div>
      </div>
      <div class='md-input-container small-5 columns'>
        <label class="md-label" for="dateRangeInput">End Date</label>
        <div class="md-input__icon-container">
          <input type="text"
            class="md-input dirty"
            tabIndex="0"
            value=""
            placeholder="End Date"
            readonly />
          <button
            type="button"
            style="display:none;"
            class="md-button md-button--36 md-button--icon"
            alt="clear input"
            type="button"
            tabIndex="-1">
            <span class="md-button__children">
              <i class="icon icon-clear-active_16"></i>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>