date validations in angular js & jquery
I have used below datepicker to display dates both in start& end dates.how to do date validations in angular js .
1)end date should be greater than start date.how to disable dates in end date datepicker?
2)difference between the dates should be 30 days.user can take only select dates for 30 days.
1)end date should be greater than start date.how to disable dates in end date datepicker?
2)difference between the dates should be 30 days.user can take only select dates for 30 days.
var search = angular.module('search', ['ui.bootstrap']);
search.directive('jqstartdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function (date) {
scope.startdate = date;
scope.$apply();
}
});
}
};
});
search.directive('jqenddatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function (date) {
scope.enddate = date;
scope.$apply();
}
});
}
};
}); <html ng-app="search" style="overflow-x: hidden">
<head><meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="lib/jquery/jquery-2.1.4.min.js"></script>
<script src="lib/jquery/jquery-ui.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<title>Tower Search POC</title>
<body ng-controller="searchCtrl">
<form name="myForm">
<div class="container-fluid">
<div >
<div class="row">
<div class="form-group col-xs-6">
<div class="controls">
<div id="nav-search">
<small><b>Start Date</small></b> <input id="date-picker-2" type="text" placeholder="StartDt" ng-model="startdate" jqstartdatepicker/>
</div>
</div>
<br/>
<div class="controls">
<div id="nav-search">
<small><b> End Date</small></b> <input type="text" placeholder="EndDt" ng-model="enddate" jqenddatepicker/>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body></html>
A working fiddle
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.