1

I need to use Bootstrap TimePicker with AngularJS. I am new to AngularJS.

I have edit option for end date. on edit timepicker is shown but not working in AngularJS.

HTML:

    <div class="col-md-3">
        <label>End Time</label> 
         <span ng-hide="editingViewActivityForm">{{actDetailsData.endTime | date: 'shortTime'}}</span>      
           <div ng-show="editingViewActivityForm" class="input-group bootstrap-timepicker timepicker">
                <input id="timepicker1" ng-model="actDetailsData.endTime" type="text" class="form-control input-small">

<span class="input-group-addon" ng-click="openTime()">
<i class="glyphicon glyphicon-time"></i></span>
            </div>
         </div>

Controller:

angular.element(document).ready(function () {
        angular.element('#timepicker1').timepicker();
      });
James Z
  • 12,209
  • 10
  • 24
  • 44
niteshgd
  • 31
  • 2

1 Answers1

0

you can use ui-bootstrap instead of bootstrap.

at first download ui bootstrap then add ui bootstrap script and css link to your project .then add ui.bootstrap to your module 

angular.module('myModule', ['ui.bootstrap']);

and at the end add datepicker like this :

 <input type="text" class="form-control" uib-datepicker-popup="{{format}}" 
 ng-model="dt" is-open="popup1.opened" min-date="minDate" max-date="maxDate"
 datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
 ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />

ui bootstrap datepicker in github

Aref Zamani
  • 2,023
  • 2
  • 20
  • 40
  • Thanks! It is really more exciting. but is there any similar way to use the uib-timepicker with input format. – niteshgd Jan 13 '18 at 13:16