I want to create a Datepicker directive in Angular JS where I want to enable only a few particular dates for the user.
For Example: I have a set of numbers 1,3,5,7 so I want to enable these particular dates in the Datepicker for each month.
If you're using Datepicker directive from Angular-UI. Check out this thread :
Disable specific dates in Angularjs date picker
If you want to create a custom datepicker directive in Angular :
Assuming you have the algorithm generating a datepicker, you can make a regular datepicker and put a ng-click on each day (using ng-repeat inside week/month) and check if the selected day is a member of your set of numbers in your controller.
You can also use ng-class="{{disabled: checkIfDayIsDisabled()}} on the day element in your html to gray out the disabled dates using css to make it more obvious for the user.
Here's an example how I would implement it :
in your js:
var enabledDates = [1,3,5,7];
$scope.checkIfDayIsDisabled(day) {
if (!checkIfDayIsDisabled(day)) {
// executes this only if the day is enabled
}
$scope.checkIfDayIsDisabled(day) {
return (check if day is in enabledDates);
}
in your html:
<div ng-class="{{disabled: checkIfDayIsDisabled(day)}}" ng-repeat="day in month" ng-click="selectDay(day)">{{day.date | date:'dd'}}</div>
in your css:
.disabled{
// your gray out styling
}
Hope this will help you out.