Angular JQuery Datepicker 未在加载时设置 MinDate

Question

我正在 JQuery UI 的日期选择器上使用 AngularJS 项目中的开始日期和结束日期字段。我已经添加了将值绑定到模型值的指令，并且我还向 OnSelect 添加了一个检查，为每个字段设置 minDate 和 maxDate 选项（因此 Date To 永远不会早于 Date From）。问题是，在加载页面时，实际上没有 selected 日期（即使模型有一个值），所以仍然有可能 select 一个 To date 早于 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();
                    }
                });
            });
        }
    }
});

Working Plunkr

更新

抱歉我的错误假设，如果您真的关心何时加载数据或何时分配日期变量 jquery ui datepicker 应该绑定到它们，那么我会更喜欢使用 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();
                  }
              });
            })

        }
    }
});

Updated Plunkr 5 秒后显示范围变量的设置值

希望对您有所帮助，谢谢。

Answer 2

更新 $timeout 中的 minDate 和 maxDate。

$timeout 将确保指令被渲染。

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

Angular JQuery Datepicker 未在加载时设置 MinDate

Angular JQuery Datepicker Not Setting MinDate on Load

javascript

jquery

datepicker

angularjs

angularjs-directive