javascript - 在 AngularJS 中为 jQuery 日期选择器动态设置最大限制

Question

在我的应用程序中，最大日期是根据某种逻辑计算的。日期是 JSON 日期。它将用于设置最大日期。

为了显示问题，我创建了一个 plunker 链接 ( http://plnkr.co/edit/KR2brhOXPMgZhbhafhex?p=preview)。

在我的示例中，max-date 属性获取 JSON 日期

<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"/>

在我的 Controller 中，我尝试将 JSON 日期转换为 mm/dd/yy 日期字符串。为此，我创建了一个函数 getcalculatedDate 接受

在 chrome 开发工具控制台中评估我的日期

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;
    }    
});

我已经创建了一个指令来帮助我实现这一目标

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);
                    });
                }
            });
        }
    }
};
});

Answer 1

这不是一个有效的日期:"/Date(1522728000000)/"(但是一个字符串)绝对不是一个有效的 JSON(检查 here)。

您可以做的是向函数 getCalculatedDate 传递一个 Date object (参见 plunker )。例如像这样:

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

或者...从“JSON”中包含的值 1522728000000(顺便说一句，这不是有效日期，请参阅 Date.parse、IETF-compliant RFC 2822 timestamps 和 version of ISO8601)创建getCalculatedDate 函数中的日期，如下所示(参见 plunker ):

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

额外阅读 Material (感谢 OP，DotNetBeginner!)

• Convert .NET date format into JavaScript date
• Where can I find documentation on formatting a date in JavaScript?