Question

我需要将我的一个日期选择器输入的最小日期设置为今天日期之后的5天。我为AngularJS设置了jQueryUI datepicker指令，它本身就很好用。当我尝试为单个日期选择器添加任何属性时，例如'min'（日期），它似乎不尊重该属性，并显示所有日期。

抱歉没有jsfiddle或plunker

编辑：已更新以显示解决方案

的index.html

<input id="requestDate" type="text" ng-model="requestDate" ss-datepicker min-date="5"/>

Datepicker.js

app.directive('ssDatepicker', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl){
            $(function(){
                element.datepicker({
                    dateFormat:'dd-M-yy',
                    showOn: 'both',
                    buttonImage: "/e/images/calendar-ui.gif",
                    buttonImageOnly: true,
                    buttonText:'Choose a Date',
        beforeShow: function(element, datepicker){
            if(attrs.minDate){
                            angular.element(element).datepicker("option", "minDate", attrs.minDate);
            }
            if(attrs.maxDate){
                            angular.element(element).datepicker("option", "maxDate", attrs.maxDate);
            }
        },
                    onSelect:function(date){
                        scope.$apply(function(){
                            ngModelCtrl.$setViewValue(date);
                        });
                    }
                });
            });
        }
    }
});

提前致谢！

Answer 1

好的，多亏塞巴斯蒂安，我能够弄清楚。出于某种原因，它不像“min-date”属性的日期变量，但是它将接受偏移量，为了我的目的，它可以完全按照需要工作。我很确定这是一个格式化问题，日期阻止它工作。

    app.directive('ssDatepicker', function(){
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, element, attrs, ngModelCtrl){
                    $(function(){
                        element.datepicker({
                            dateFormat:'dd-M-yy',
                            showOn: 'both',
                            buttonImage: "/e/images/calendar-ui.gif",
                            buttonImageOnly: true,
                            buttonText:'Choose a Date',
                            beforeShow: function(element, datepicker){
                                if(attrs.minDate){
                                    angular.element(element).datepicker("option", "minDate", attrs.minDate);
                                }
                                if(attrs.maxDate){
                                    angular.element(element).datepicker("option", "maxDate", attrs.maxDate);
                                }
                            },
                            onSelect:function(date){
                                scope.$apply(function(){
                                    ngModelCtrl.$setViewValue(date);
                                });
                            }
                        });
                    });
                }
            }
        });

Answer 2

你觉得“min”值应该导致一些变化吗？

您的指令不会读取此值，是吗？

您可以通过链接功能中的attrs.min访问它。

你有没有关于你正在做什么的文件。我找不到像你的代码那样的东西。

哦 - 您没有使用Angular UI Bootstrap Datepicker而是使用jQuery UI Datepicker。

所以你必须设置这个值：http://api.jqueryui.com/datepicker/#option-minDate

...
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
minDate: attrs.min, // get the value of the "min" attribute - maybe you should take care that it is really a date
...

就像：http://plnkr.co/edit/MyduNfrchgsuD9mAYOEU?p=preview

如何动态设置AngularJS jQueryUI datepicker指令的属性

2 个答案: