Geek Answers Handbook

Bind angular datepicker and timepicker

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

According to the timepicker documentation, an object is required new Datefor the min and max values. If I just install 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 only works for today because of the facility new Date().

I want it to work on any day that I choose. Currently, the timepicker does not limit time as needed. In addition, sometimes the borders of the boxes with the timer turn red (this may be due to verification errors), but does not indicate what exactly is the error.

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

+4
1

timepicker , dateChange :

$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;
}


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.imtqy.com/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>
Hide result

Plunker

+6

More articles:


All Articles