I need one help. I am implementing jquery.timepicker.js to get the time interval in my Angular application but i am not getting any value like that.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">From Time :</span>
<input type="text" name="time" id="time" class="form-control oditek-form" placeholder="E.G-9.00AM" ng-model="time" ng-change="clearField('time');" maxlength="30" time-picker="" />
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">To Time :</span>
<input type="text" name="time1" id="time1" class="form-control oditek-form" placeholder="E.G-9.00AM" ng-model="time1" ng-change="clearField('time1');" maxlength="30" time-picker="" />
</div>
</div>
<div style="text-align:center; padding:10px 0px;">
<input type="button" class="btn btn-success" ng-click="addTimeDetails();" id="saveData" value="Add" style="margin-right:20px;" />
</div>
my controller side code is given below.
var app=angular.module('spesh',[]);
app.controller('formController',function($scope,$http){
$scope.addTimeDetails=function(){
console.log('time',$scope.time,$scope.time1);
}
})
app.directive('timePicker', [function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
model: '=ngModel'
},
link: function ($scope, element, attrs, ngModelCtrl) {
element.timepicker();
element.on('changeTime', function () {
$scope.$apply(function () {
$scope.model = element.val();
});
});
}
}
}]);
Here i need when user will click on text field the time drop down will come and click on add button the selected time will show in console.MY complete code is here in plunkr.Please help me.
