Angular jQuery Datepicker未在加載時設置MinDate

Question

我在AngularJS項目的Date From和Date To字段上使用JQuery UI的Datepicker。 我添加了將值綁定到模型值的指令，還添加了對OnSelect的檢查，該檢查為每個字段設置minDate和maxDate選項（因此Date To永遠不會早於Date From）。 問題在於，在加載頁面時，實際上沒有選擇任何日期（即使模型具有值），因此仍然可以選擇早於“日期自”的“到”日期。 我添加了$ watch服務至少可以糾正錯誤，但是我仍然不知道如何在指令內或控制器內在加載時設置minDate。 我還在Angular代碼之外嘗試了$（document）.ready，但這也不起作用。 這是添加任何內容設置minDate之前的代碼。

在控制器內：

$scope.messagesForm.dateFrom = moment().subtract('days', 30).format('MM/DD/YYYY');
$scope.messagesForm.dateTo = moment().format('MM/DD/YYYY');
$scope.$watch('messagesForm.dateTo', function(newVal, oldVal) {
    if (!newVal) return;
    if (Date.parse(newVal) < Date.parse($scope.messagesForm.dateFrom)) {
        $scope.messagesForm.dateFrom = newVal;
    }
});

指示：

.directive('datepicker', function() {
return {
    restrict: 'A',
    require : 'ngModel',
    link : function (scope, element, attrs, ngModelCtrl) {
        $(function(){
            element.datepicker({
                dateFormat: 'mm/dd/yy',
                showStatus: true,
                showWeeks: true,
                highlightWeek: true,
                maxDate: 0,
                numberOfMonths: 1,
                showAnim: "scale",
                showOptions: { origin: ["bottom", "right"] },
                onSelect: function (date) {
                    if (this.id === "MessageDateFrom") {
                       $("#MessageDateTo").datepicker("option", "minDate", date);
                    } else if (this.id === "MessageDateTo") {
                        $("#MessageDateFrom").datepicker("option", "maxDate", date);
                    }
                    ngModelCtrl.$setViewValue(date);
                    scope.$apply();
                }
            });
        });
    }
}

}）;

HTML：

<div class="form-group">
     <input type="text" id="MessageDateFrom" class="form-control dates" ng-model="messagesForm.dateFrom" datepicker readonly="readonly" />
</div>
<div class="form-group">
     <input type="text" id="MessageDateTo" class="form-control dates" ng-model="messagesForm.dateTo" datepicker readonly="readonly" />
</div>

我嘗試失敗的JQuery：

$(document).ready(function() {
    $("MessageDateTo").datepicker("option","minDate",$("MessageDateFrom").val());
};

有任何想法嗎？

謝謝！

Answer 1

無需擔心控制器何時加載，或只需添加這兩個屬性minDate和maxDate ，而它們的限制如minDate:"-30d",maxDate: 0,

您還可以從指令屬性動態放置minDate和maxDate值。

指示

app.directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datepicker({
                    dateFormat: 'mm/dd/yy',
                    showStatus: true,
                    showWeeks: true,
                    highlightWeek: true,
                    minDate:"-30d", //here i did logic -30d
                    maxDate: 0, //today is max date
                    numberOfMonths: 1,
                    showAnim: "scale",
                    showOptions: { origin: ["bottom", "right"] },
                    onSelect: function (date) {
                        ngModelCtrl.$setViewValue(date);
                        scope.$apply();
                    }
                });
            });
        }
    }
});

工作朋克

更新

抱歉，我的錯誤假設是，如果您確實關心何時加載數據或在那時分配jquery ui datepicker date變量應該綁定到它們，那么我將更喜歡使用attrs.$observe ，只要您屬性表達式被求值。 為了使其正常工作，我確實在頁面上添加了一個屬性名稱loaded="{{messagesForm.dateFrom}}" ＆ loaded="{{messagesForm.dateTo}}" ，因此，每當將值分配給dateFrom和dateTo時，相應的日期選擇器都會得到分配給他們的元素

指示

 app.directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            //get called when `{{}}` value evaluated
            attrs.$observe('loaded',function(val){
              element.datepicker({
                  dateFormat: 'mm/dd/yy',
                  showStatus: true,
                  showWeeks: true,
                  highlightWeek: true,
                  maxDate: 0,
                  numberOfMonths: 1,
                  showAnim: "scale",
                  showOptions: { origin: ["bottom", "right"] },
                  onSelect: function (date) {
                      if (this.id === "MessageDateFrom") {
                         $("#MessageDateTo").datepicker("option", "minDate", date);
                      } else if (this.id === "MessageDateTo") {
                          $("#MessageDateFrom").datepicker("option", "maxDate", date);
                      }
                      ngModelCtrl.$setViewValue(date);
                      scope.$apply();
                  }
              });
            })

        }
    }
});

5秒鍾后更新了Plunkr，並演示了范圍變量的設置值。

希望這可以對您有所幫助，謝謝。

Answer 2

更新$timeout的minDate和maxDate 。

$timeout將確保呈現指令。

這是更新的插件。 http://plnkr.co/edit/2ucTcwKFPFpgxoJiRB3f?p=preview