在AngularJS中为jQuery datepicker动态设置最大限制

Posted 2023-05-07

【中文标题】在AngularJS中为jQuery datepicker动态设置最大限制

【英文标题】：Set dynamically max limit to jQuery datepicker in AngularJS

【发布时间】：2019-03-21 11:05:34

【问题描述】：

在我的应用程序中，最大日期是根据一些逻辑计算的。日期是 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"/>

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

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

【问题讨论】：

没有“JSON 日期”。见Convert .NET date format into javascript date 和Where can I find documentation on formatting a date in JavaScript?。

【参考方案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）在@987654336 中创建日期@这样的函数（见plunker）：

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

其他阅读材料（感谢 OP，DotNetBeginner！）

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

【讨论】：

这就是我从 mvc 控制器到 angularjs 控制器的日期。请检查我在问题中添加的屏幕截图

好吧，您可能需要解决这个问题（如果您是 mvc 控制器程序员）。否则，您将不得不应用一些解决方法。正如你肯定能够检查new Date($scope.scheduleDate) 给Invalid Date

同时检查链接

谢谢，知道了。我忽略了你提到的一些事情

@DotNetBeginner 太棒了！我会将这些链接添加到帖子中，以便未来的读者可以轻松找到它。