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
Post a Comment