angularjs - Bootstrap Datepicker and angular validation -


i first steps in using bootstrap datepicker , face problem. use in angular app.

each input field has own background-color based on class (.ng-pristine, .ng-untouched, .ng-dirty, .ng-valid , .ng-invalid).

when fill datepicker's input manually, field becomes "ng-valid", when pick date calendar nothing happens.

ng-model changes, input still invalid.

i'd input becomes valid, after picking date calendar.

here code:

html:

<div class="container">                 <div class='col-md-6'>                     <div class="form-group">                         <label for="datetimepicker6">departure</label>                         <div class='input-group date' id='datetimepicker6'>                             <input type='text' name="departure" id="departure" class="form-control"  ng-model="data.pickedoptions.departure">                             <span class="input-group-addon">                     <span class="glyphicon glyphicon-calendar"></span>                 </span>                         </div>                     </div>                 </div>                 <div class='col-md-6'>                     <div class="form-group">                         <label for="datetimepicker7">arrival</label>                         <div class='input-group date' id='datetimepicker7'>                             <input type='text' name="arrival" id="arrival" class="form-control"  ng-model="data.pickedoptions.arrival">                             <span class="input-group-addon">                     <span class="glyphicon glyphicon-calendar"></span>                 </span>                         </div>                     </div>                 </div>     </div> 

js:

$(function () {         $('#datetimepicker6').datetimepicker({             locale: 'ru',             format: "dd.mm.yyyy"         });         $('#datetimepicker7').datetimepicker({             usecurrent: false,              locale: 'ru',             format: "dd.mm.yyyy"         });         $("#datetimepicker6").on("dp.change", function (e) {             $('#datetimepicker7').data("datetimepicker").mindate(e.date);             $scope.data.pickedoptions.departure = $('#departure').val();             $scope.$digest();             $scope.$watch('data.pickedoptions.departure', function (newvalue) {                 $scope.data.pickedoptions.departure= newvalue;             });          });         $("#datetimepicker7").on("dp.change", function (e) {             $('#datetimepicker6').data("datetimepicker").maxdate(e.date);             $scope.data.pickedoptions.arrival = $('#arrival').val();             $scope.$digest();             $scope.$watch('data.pickedoptions.arrival', function (newvalue) {                 $scope.data.pickedoptions.arrival= newvalue;                 if (newvalue) {                     var d1 = $('#departure').val();                     var d2 = $('#arrival').val();                      var date1 = date.parse(d1);                     var date2 = date.parse(d2);                      var date1_ms = date1.gettime();                     var date2_ms = date2.gettime();                      var diff = date2_ms-date1_ms;                      // days                     var days = (diff/1000/60/60/24) + 1;                       $scope.data.pickedoptions.days =  days;                 }              });         });      }); 


Comments

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

html - How to custom Bootstrap grid height? -

transpose - Maple isnt executing function but prints function term -