Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I am using the timepicker control with the datepicker control from AngularUI. I have a date I want to set with two timepickers for start and end time.

My problem is that when I change the date, I want to update the year/month/day of the timepickers as well, as those are the values I want to save. However, when I do that, it messes with the validation on the min (of the end date timepicker; if I remove it, it works, which I can't do).

plnkr here: http://plnkr.co/edit/HdKmbvBsSdtUBnf9ZuZd?p=preview

For simplicity, just click on any date on the datepicker, and you'll see the value of $valid on the form becomes false. The timepicker control itself works in the sense that it does not let you go below the minimum value specified (which is the value from the "start" timepicker) but the form is invalid.

Here is the code I use to update the times:

$scope.dateChanged = function() {
        $log.log('Date changed to: ' + $scope.dt);

        var start = new Date($scope.dt);
        var end = new Date($scope.dt);

        $scope.starttime = start;
        $scope.endtime = end.setHours(end.getHours() + 1);
      };

EDIT:

After looking at the Angular UI bootstrap.tpls.js file, it looks like it calls:

this.render = function() {
    var date = ngModelCtrl.$viewValue;

    if (isNaN(date)) {
      ngModelCtrl.$setValidity('time', false);
      $log.error('Timepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.');
    } else {
      if (date) {
        selected = date;
      }

      if (selected < min || selected > max) {
        ngModelCtrl.$setValidity('time', false);
        $scope.invalidHours = true;
        $scope.invalidMinutes = true;
      } else {
        makeValid();
      }
      updateTemplate();
    }
  };

before this watch fires:

$scope.$parent.$watch($parse($attrs.min), function(value) {
    var dt = new Date(value);
    min = isNaN(dt) ? undefined : dt;
  });

which causes it to fail. Not sure what the best work around would be in my scenario.

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.