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

<div class="dashboard-editor-header">
	<div class="dashboard-editor-title">
		<i class="fa fa-clock-o"></i>
		Custom time range
	</div>
</div>

<div class="dashboard-editor-body">
	<style>
		.timepicker-to-column {
			margin-top: 10px;
		}

		.timepicker-input input {
			outline: 0 !important;
			border: 0px !important;
			-webkit-box-shadow: 0;
			-moz-box-shadow: 0;
			box-shadow: 0;
			position: relative;
		}

		.timepicker-input input::-webkit-outer-spin-button,
		.timepicker-input input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

		input.timepicker-date {
			width: 90px;
		}
		input.timepicker-hms {
			width: 20px;
		}
		input.timepicker-ms {
			width: 25px;
		}
		div.timepicker-now {
			float: right;
		}
	</style>

	<div class="timepicker form-horizontal">
		<form name="input">

			<div class="timepicker-from-column">
				<label class="small">From</label>
				<div class="fake-input timepicker-input">
					<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.from.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
					<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.from.millisecond" required ng-pattern="patterns.millisecond"  onClick="this.select();"/>
				</div>
			</div>

			<div class="timepicker-to-column">

				<label class="small">To (<a class="link" ng-class="{'strong':temptime.now}" ng-click="setNow();temptime.now=true">set now</a>)</label>

				<div class="fake-input timepicker-input">
					<div ng-hide="temptime.now">
						<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.to.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
						<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.to.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
					</div>
					<span type="text" ng-show="temptime.now" ng-disabled="temptime.now">&nbsp <i class="pointer fa fa-remove" ng-click="setNow();temptime.now=false;"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
				</div>
			</div>

		</form>
		<div class="clearfix"></div>
	</div>
</div>

<div class="dashboard-editor-footer">
	<form name="input" style="margin-bottom:0">
		<span class="" ng-hide="input.$valid">Invalid date or range</span>
		<button ng-click="setAbsoluteTimeFilter(validate(temptime));dismiss();" ng-disabled="!input.$valid" class="btn btn-success">Apply</button>
		<button ng-click="dismiss();" class="btn btn-success pull-right">Cancel</button>
	</form>
</div>