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

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

	<button class="btn navbar-button" 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--tight" ng-click='ctrl.move(1)'>
		<i class="fa fa-chevron-right"></i>
	</button>
</div>

<div class="navbar-buttons">
	<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--refresh" ng-click="ctrl.timeSrv.refreshDashboard()">
		<i class="fa fa-refresh"></i>
	</button>
</div>

<div ng-if="ctrl.isOpen" class="gf-timepicker-dropdown">
  <form name="timeForm" class="gf-timepicker-absolute-section">
    <h3 class="section-heading">Custom range</h3>

    <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 class="gf-timepicker-relative-section">
    <h3 class="section-heading">Quick ranges</h3>
    <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>