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

<div class="gf-box-header">
	<div class="gf-box-title">
		<i class="fa fa-clock-o"></i>
		Custom time range
	</div>
	<button class="gf-box-header-close-btn" ng-click="dismiss();">
		<i class="fa fa-remove"></i>
	</button>
</div>

<div class="gf-box-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="timeForm" style="margin-bottom: 0">

			<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="ctrl.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="ctrl.setNow();temptime.now=false;"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
				</div>
			</div>

			<br>
			<button ng-click="ctrl.setAbsoluteTimeFilter(ctrl.validate(temptime));dismiss();" ng-disabled="!timeForm.$valid" class="btn btn-success">Apply</button>
			<span class="" ng-hide="input.$valid">Invalid date or range</span>
		</form>
	</div>
</div>