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*](https://stackoverflow.com/questions/9311264/convert-net-date-format-into-javascript-date) and [*Where can I find documentation on formatting a date in JavaScript?*](https://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript). — RobG, Oct 16 '18 at 22:32

score 1 · Accepted Answer · edited Oct 07 '21 at 11:39

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 07 '21 at 11:39

Community

1
1

answered Oct 16 '18 at 20:46

lealceldeiro

14,342
6
49
80

this is how i get my date from mvc controller to angularjs controller. please check the screen shot i have added in the question – DotNetBeginner Oct 16 '18 at 21:25
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` – lealceldeiro Oct 16 '18 at 21:38
Also check the link – DotNetBeginner Oct 16 '18 at 21:40
1

thanks got it. i overlooked something that you mentioned – DotNetBeginner Oct 16 '18 at 21:52
@DotNetBeginner great!, I'll add those links to the post, so future readers can find it easily. – lealceldeiro Oct 17 '18 at 14:24
yeah that will be helpful. Dates can be tricky at time with so many different formats – DotNetBeginner Oct 17 '18 at 15:32

Set dynamically max limit to jQuery datepicker in AngularJS

1 Answers1