create a widget
like so
HTML
<!--div class="sp-time-picker-widget">
<label class="sp-time-label" ng-if="options.label">{{ options.label }}</label>
<!-- Native time control -->
<!--comment">
<input id="sp_time_input"
type="time"
ng-model="page.fieldValue"
ng-model-options="{getterSetter: true}"
min="09:00" max="17:00"
ng-change="updateAnswer()"
class="sp-time-input" ng-required="true"/>
<!-- Hidden field for survey save (stores hh:mm AM/PM) -->
<!--comment">
<input type="hidden" ng-model="page.zone" name="{{::options.valueParam || 'answer'}}" id="hidden_answer" required />
<div class="sp-time-display" ng-if="page.displayValue">
Selected: <strong>{{ data.displayValue }}</strong>
</div>
</div>
on client script do
$scope.updateAnswer = function() {
var el = $('#hours').val() + ":" + $('#minutes').val() + ":" + $('#ampm').val();
//grabing value with$() jsut to showcase funcionalitty
$scope.page.field.value = value;
};
this will save the value on your metric
