Use angular-ui timepicker as input form

Question

I'm using angular-ui timepicker according to the example here. This is my HTML:

<timepicker data-ng-model="hour" data-ng-change="changed()" data-hour-step="1" data-minute-step="5" data-show-meridian="ismeridian"></timepicker>

In the js file, I'm trying to get the value with

var start_hour = {
            hour:new Date($scope.hour).getHours(),
            min:new Date($scope.hour).getMinutes()
        };

But it's only works if I set a new date in JS and I can't get the time inputted in the page. Want I want is to use the timepicker as a input to allow a filter based on the date but also in the time. I googled a lot for this, but I couldn't find anything

Just FIY, this is my complete HTML with datepicker where I get the date (this is works fine):

<div class="col-md-2">
        <label for="InitialDate">Date:</label>
        <div id="InitialDate" class="input-group">
            <input type="text" name="Initial" data-datepicker-popup="yyyy/MM/dd" data-ng-model="date"
                   data-is-open="datepickers.date" data-datepicker-options="dateOptions" data-date-disabled="disabled(date, mode)" data-ng-required="true"/>
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" data-ng-click="open($event)"><i class="fa fa-calendar"></i></button>
            </span>
        </div>
        <timepicker data-ng-model="hour" data-ng-change="changed()" data-hour-step="1" data-minute-step="5" data-show-meridian="ismeridian"></timepicker>
    </div>

Joao Leal · Accepted Answer · 2015-06-17 12:56:36Z

1

You can use $scope.$watch: scope documentation

$scope.$watch('hour', function(newValue) {
   $scope.start_hour = {
        hour:new Date(newValue).getHours(),
        min:new Date(newValue).getMinutes()
    };  
});

Every time that the hour value changes, angular will call that function and update your start_hour variable.

answered Jun 17, 2015 at 12:56

Joao Leal

5,5521 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Over a year ago

Thx for your help. Actually, the changed() function already does it. I was using this function in the wrong way.

James · Accepted Answer · 2015-06-17 16:41:33Z

1

The error in this case was caused by a error in the changed() function.

With this function in the controller, all works fine:

$scope.changed = function () {
      $scope.start_hour = {
        hour: $scope.hour.getHours(),
        min: $scope.hour.getMinutes()
        };  
    };

edited Jun 17, 2015 at 16:41

answered Jun 17, 2015 at 16:34

James

1,7892 gold badges39 silver badges67 bronze badges

Collectives™ on Stack Overflow

Use angular-ui timepicker as input form

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related