energylink/public/app/features/dashboard/timepicker/timepicker.html

<div class="navbar-buttons">
  <button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(-1)' ng-if="ctrl.isAbsolute">
		<i class="fa fa-chevron-left"></i>
	</button>

	<button bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()" class="btn navbar-button gf-timepicker-nav-btn">
		<i class="fa fa-clock-o"></i>
		<span ng-bind="ctrl.rangeString"></span>
		<span ng-show="ctrl.isUtc" class="gf-timepicker-utc">UTC</span>
		<span ng-show="ctrl.dashboard.refresh" class="text-warning">&nbsp; Refresh every {{ctrl.dashboard.refresh}}</span>
	</button>

  <button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(1)' ng-if="ctrl.isAbsolute">
		<i class="fa fa-chevron-right"></i>
	</button>

  <button class="btn navbar-button navbar-button--zoom" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'>
		<i class="fa fa-search-minus"></i>
	</button>

  <button class="btn navbar-button navbar-button--refresh" ng-click="ctrl.timeSrv.refreshDashboard()">
		<i class="fa fa-refresh"></i>
	</button>
</div>

<div ng-if="ctrl.isOpen" class="gf-timepicker-dropdown">
  <div class="popover-box">
    <div class="popover-box__header">
      <span class="popover-box__title">Quick ranges</span>
    </div>
    <div class="popover-box__body gf-timepicker-relative-section">
      <ul ng-repeat="group in ctrl.timeOptions">
        <li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
          <a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
        </li>
      </ul>
    </div>
  </div>

  <div class="popover-box">
    <div class="popover-box__header">
      <span class="popover-box__title">Custom range</span>
    </div>
    <form name="timeForm" class="popover-box__body gf-timepicker-absolute-section">
      <label class="small">From:</label>
      <div class="gf-form-inline">
        <div class="gf-form max-width-28">
          <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
        </div>
        <div class="gf-form">
          <button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
            <i class="fa fa-calendar"></i>
          </button>
        </div>
      </div>

      <div ng-if="openFromPicker">
        <datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
      </div>


      <label class="small">To:</label>
      <div class="gf-form-inline">
        <div class="gf-form max-width-28">
          <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime>
        </div>
        <div class="gf-form">
          <button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
            <i class="fa fa-calendar"></i>
          </button>
        </div>
      </div>

      <div ng-if="openToPicker">
        <datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteToChanged()"></datepicker>
      </div>

      <label class="small">Refreshing every:</label>
      <div class="gf-form-inline">
        <div class="gf-form max-width-28">
          <select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
        </div>
        <div class="gf-form">
          <button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
        </div>
      </div>
    </form>
  </div>
</div>