energylink/src/app/panels/timepicker/module.html

<div ng-controller='timepicker' ng-init="init()">
  <style>
    .timepicker-block {
      display: inline-block;
    }
  </style>
  <div class="row-fluid form-horizontal" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0">
    <div ng-switch-when="absolute" >
      <div class="timepicker-block">
        <form class="nomargin">
          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
          <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
        </form>
      </div>
      to
      <div class="timepicker-block" style="margin-left:5px">
        <form class="nomargin">
          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.to.date" data-date-format="mm/dd/yyyy" bs-datepicker>
          <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.to.time" bs-timepicker> <!--(<a ng-click="to_now()">now</a>)-->
      </form>
      </div>
      <div class="timepicker-block">
        <form class="nomargin">
          <button class="btn" ng-click="time_apply()"><i class="icon-ok"></i></button>
        </form>
      </div>
    </div>
    <div ng-switch-when="since">
      <div class="timepicker-block">
        <form class="nomargin">
          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
          <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
        </form>
      </div>
      <div class="timepicker-block" style="margin-left:5px">
        <form class="nomargin">
          <button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
        </form>
      </div>
    </div>
    <div ng-switch-when="relative">
      <div class="timepicker-block">
        <form class="nomargin input-append">
          <button class="btn btn" ng-repeat='timespan in panel.time_options' ng-class="{'btn-success': (panel.timespan == timespan)}" ng-click="set_timespan(timespan)">{{timespan}}</button>
          <!--<select ng-model="panel.sort[0]" ng-options="f for f in fields"></select>-->
        </form>
      </div>
    </div>
  </div>
  <div class="row-fluid" ng-show="filterSrv.idsByType('time').length < 1">
    <div>
      <div class="span11">
        <h4>No time filter present</h4>
      </div>
    </div>
  </div>
  <div class="row-fluid nomargin">
    <div class="span12 small" ng-show="filterSrv.idsByType('time').length > 0">
      <a class="link" ng-click="set_mode('relative')" ng-class="{'strong': (panel.mode == 'relative')}">Relative</a> |
      <a class="link" ng-click="set_mode('absolute')" ng-class="{'strong': (panel.mode == 'absolute')}">Absolute</a> |
      <a class="link" ng-click="set_mode('since')"    ng-class="{'strong': (panel.mode == 'since')}">Since</a>
      <span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> |
        <input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh
        <span ng-class="{'ng-cloak': !panel.refresh.enable}">
          every <a data-title="<small>Auto-refresh Settings</small>" data-placement="bottom" bs-popover="'app/panels/timepicker/refreshctrl.html'">{{panel.refresh.interval}}s</a>.
        </span>
      </span>
    </div>
    <div class="span12 small" ng-show="filterSrv.idsByType('time').length < 1">
      <a class='btn btn-small' ng-click="time_apply()">Create a time filter</a>
    </div>
  </div>
</div>