0

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.

1 Answer 1

0

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Actually I need something like this data is coming to my controller in form of string so when I pass this string to a directive then it should split and disable those particular dates in the Datepicker.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.