g00fy- / angular-datepicker

calendar and datepicker directives for angular
MIT License
719 stars 420 forks source link

min/max limit #37

Open CosticaPuntaru opened 10 years ago

CosticaPuntaru commented 10 years ago

in the current implementation you can limit the dates by using:

    $scope.$watch 'model.filters.endTime', (value) ->
        if value > new Date()
            $scope.model.filters.endTime = new Date()

but this still allows the user to navigate to unwanted future days

i think there should be a min/max limit that blocks the user from navigating outside the wanted range, i recommand using the min and max attribute and integrate them like they work for the input[date] element

SuricateCan commented 9 years ago

That would be very nice indeed. Any ideas on how to implement that?

SuricateCan commented 9 years ago

I worked on the max and min validation. I "borrowed" some code from angular.js source and wrote the following inside directive date-time's link function:

                function isValidDate(value) {
                    // Invalid Date: getTime() returns NaN
                    return value && !(value.getTime && value.getTime() !== value.getTime());
                }

                if (angular.isDefined(attrs.min) || attrs.ngMin) {
                    var minVal;
                    ngModel.$validators.min = function (value) {
                        return !isValidDate(value) || angular.isUndefined(minVal) || value >= minVal;
                    };
                    attrs.$observe('min', function (val) {
                        minVal = new Date(val);
                        ngModel.$validate();
                    });
                }

                if (angular.isDefined(attrs.max) || attrs.ngMax) {
                    var maxVal;
                    ngModel.$validators.max = function (value) {
                        return !isValidDate(value) || angular.isUndefined(maxVal) || value <= maxVal;
                    };
                    attrs.$observe('max', function (val) {
                        maxVal = new Date(val);
                        ngModel.$validate();
                    });
                }

I'll work now on having the calendar limit these dates, and not just validate them.

PS.: @g00fy- Would you be kind enough to review and add my code to your source?

eralha commented 9 years ago

@SuricateCan can you make PR compiling this changes? thanks

SuricateCan commented 9 years ago

@eralha PR #102

evdoks commented 9 years ago

Is min/max limit working for you at all?

I'm trying to use it, but as soon as use, let say, min-date, no matter which date I pick (before or after min-date) the date-time input is marked is ng-invalid ng-invalid-min. Here is the Plunker example with min-date set to the current date.

Am I doning something wrong?

SuricateCan commented 9 years ago

@evdoks You can't use "now" in max-date attribute. You have to use a valid, ISO format, date string. Note in the code that the date you put in there is used in a "new Date()" statement.

eralha commented 9 years ago

Yes its true, the readme is wrong! only date string not expressions.

SuricateCan commented 9 years ago

@evdoks You could extend this functionality by testing the variable before the new Date stuff. Create a PR if you decide to make this change.