Bind angular datepicker and timepicker

Question

I want to bind angular timepicker and datepicker. I am using Angular bootstrap library

As per documentation of timepicker, it requires new Date object for min and max values. If I simply set like this

var d = new Date();
d.setHours( 2 );
d.setMinutes( 0 );
$scope.minTime = d;

var d = new Date();
d.setHours( 11 );
d.setMinutes( 0 );
$scope.maxTime = d;

<uib-timepicker ng-model="mytime" min="min" max="max" show-meridian="false" min="minTime" max="maxTime"></uib-timepicker>

This works only for today because of new Date() object.

I want it to work on any day I select. Currently, timepicker is not restricting time as required. Also, sometimes timepicker box borders turn red (It may be due to validation errors), but does not specify what exactly is the error.

Please have a look at: http://plnkr.co/edit/LOZ9T6zexRkQpqSIaJiA?p=preview

Answer 1

In order to initialize timepicker according to the selected date replace dateChange function with:

$scope.dateChange = function() {
    var selectedDate = $scope.dt;
    var min = new Date(selectedDate.getTime());
    min.setHours(2);
    min.setMinutes(0);
    $scope.min = min;

    var max = new Date(selectedDate.getTime());
    max.setHours(4);
    max.setMinutes(0);
    $scope.max = max;
}

Working example

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function($scope) {
    $scope.format = 'yyyy/MM/dd';
    $scope.min = null;
    $scope.max = null;


     $scope.initTimePicker = function(selectedDate) {
        var min = new Date(selectedDate.getTime());
        min.setHours(2);
        min.setMinutes(0);
        $scope.min = min;

        var max = new Date(selectedDate.getTime());
        max.setHours(4);
        max.setMinutes(0);
        $scope.max = max;
    }

    
    $scope.init = function() {
        $scope.dt = new Date();
        $scope.initTimePicker($scope.dt);
    };
    $scope.init();

    $scope.clear = function() {
        $scope.dt = null;
    };

    $scope.open = function() {
        $scope.popup.opened = true;
    };

   
    $scope.popup = {
        opened: false
    };

   
  
    $scope.dateChange = function() { 
        $scope.initTimePicker($scope.dt);
    }
    

});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

  
<div ng-app="ui.bootstrap.demo" ng-controller="DatepickerDemoCtrl">
     
        <div class="row">
            <div class="col-md-6">
                <p class="input-group">
                    <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup.opened" datepicker-options="dateOptions"
                    ng-required="true" close-text="Close" ng-change="dateChange()" />

                    <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
                </p>
            </div>
        </div>

        <uib-timepicker ng-model="dt" hour-step="1" minute-step="15" name="sTime"   show-meridian="true" min="min" max="max">
        </uib-timepicker>

        <pre class="alert alert-info">Time is: {{dt | date:'M/d/yyyy HH:mm' }}</pre>


 </div>

Plunker