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

try this : $scope.today = function() { $scope.dt = new Date( "21/10/2014"); }; — Hadi J, Mar 11 '16 at 06:22
I want to set it dynamically, whichever date i select from date picker , min max time of timepicker should be set 2 to 4... — swapyonubuntu, Mar 11 '16 at 06:50

Vadim Gremyachev · Accepted Answer · 2016-03-16T10:34:40.370

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

Have a look when date is changed. Boxes on timepicker turn red(Maybe due to validation). Also, Min max is not working for default date now. — swapyonubuntu, Mar 14 '16 at 11:03
The example has been updated to initialize time picker for default date. Since we are specifying min and max properties Timepicker buttons turn red once current time is set to out of time interval — Vadim Gremyachev, Mar 16 '16 at 10:42
Thanks a lot ! Works fine.I had 1 change however, $scope.dt = new Date() then $scope.dt.setHours(2); — swapyonubuntu, Mar 17 '16 at 08:15
https://stackoverflow.com/questions/46428210/how-to-set-time-pop-up-in-the-angular-ui-bootstrap-datepicker-pop-up could plz see this link — Varun Sharma, Sep 27 '17 at 05:22

Bind angular datepicker and timepicker

1 Answers1