Set dynamically max limit to jQuery datepicker in AngularJS

Question

In my application the max date is calculated based on some logic. The date is a JSON date. It will be used to set the max date.

To show the problem I have created a plunker link (http://plnkr.co/edit/KR2brhOXPMgZhbhafhex?p=preview).

In my example max-date attribute gets the JSON date

<input type="text" date-picker="" date-range="true" ng-model="Date" 
class="form-control input-sm" placeholder="MM/DD/YYYY" 
ng-required="true" name="Date" ng-pattern='datePattern'
max-date="dateLimit"/>

In my controller I try to convert the JSON date to mm/dd/yy date string. For this I create a function getcalculateddDate that takes in

Evaluated my date in chrome dev tool console

app.controller('MainCtrl', function($scope) {
    $scope.datePattern = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/i
    var jsonDateExample = "/Date(1522728000000)/";
    $scope.dateLimit = getCalculatedDate(jsonDateExample );

    function getCalculatedDate(date) {
        var year = date.getFullYear();
        var month = (1 + date.getMonth()).toString();
        month = month.length > 1 ? month : '0' + month;
        var day = (date.getDate() - 1).toString();
        day = day.length > 1 ? day : '0' + day;
        return month + '/' + day + '/' + year;
    }    
});

I have created a directive to help me in achieving this

app.directive('datePicker', function () {
return {
    require: 'ngModel',
    scope: {
        dateRange: '=',
        maxDate: '='
    },
    link: function (scope, el, attr, ngModel) {
        if (scope.dateRange !== undefined && scope.dateRange) {
            $(el).datepicker({
                maxDate: scope.maxDate,
                minDate: '-1M',
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
        else {
            $(el).datepicker({
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    }
};
});

There is no "JSON date". See Convert .NET date format into JavaScript date and Where can I find documentation on formatting a date in JavaScript?. — RobG
– RobG, Commented Oct 16, 2018 at 22:32

Community · Accepted Answer · 2021-10-07 11:39:35Z

1

This is not a valid date: "/Date(1522728000000)/" (but a string) and definitely not a valid JSON (check it here).

What you can do is to pass to the function getCalculatedDate a Date object (see this plunker). For example like this:

$scope.dateLimit = getCalculatedDate(new Date());

Or... from the value 1522728000000 (which, BTW, is not a valid date, see Date.parse, IETF-compliant RFC 2822 timestamps and version of ISO8601) contained in the "JSON" create the date inside the getCalculatedDate function like this (see plunker):

$scope.dateLimit = getCalculatedDate("2018-10-20T03:24:00");
// ...
function getCalculatedDate(dateNum) {
    var date = new Date(dateNum);
    // ... remainder omitted
}

Additional readings (Thanks to OP, DotNetBeginner!)

edited Oct 7, 2021 at 11:39

CommunityBot

11 silver badge

answered Oct 16, 2018 at 20:46

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

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

6 Comments

DotNetBeginner Over a year ago

this is how i get my date from mvc controller to angularjs controller. please check the screen shot i have added in the question

lealceldeiro Over a year ago

Well, you might need to fix that (if you're the mvc controller programmer). Otherwise, you'll have to apply some workaround. As you surely were able to check new Date($scope.scheduleDate) gives Invalid Date

DotNetBeginner Over a year ago

Also check the link

DotNetBeginner Over a year ago

thanks got it. i overlooked something that you mentioned

lealceldeiro Over a year ago

@DotNetBeginner great!, I'll add those links to the post, so future readers can find it easily.

|

Collectives™ on Stack Overflow

Set dynamically max limit to jQuery datepicker in AngularJS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related