AngularJS指令中的JQuery-ui datepicker与locale

时间:2015-03-18 15:55:06

标签: jquery angularjs jquery-ui jquery-ui-datepicker

我有一个AngularJS应用程序。我正在使用JQuery-ui datepicker。一切都很好,但是当地人。

这是我的指示:

.directive('customDatepicker', function($filter, DateService, LocationService, PriceService) {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {

            /* CODE WITH PROBLEM BEGIN */
            console.log("Setting calendar directive");
            var locale = LocationService.getLangKey();
            if (locale == 'en') {
                locale = '';
            }
            $("#checkinDate").datepicker("option", $.datepicker.regional[ locale ] );
            $("#checkoutDate").datepicker("option", $.datepicker.regional[ locale ] );      
            /* CODE WITH PROBLEM END */

            $(function() {
                element.datepicker({
                    minDate: 2,
                    dateFormat:'dd-M-yy',
                    maxDate: '+1y', 
                    showAnim: 'slideDown',
                    onSelect:function (date) {
                        scope.$apply(function () {
                            ngModelCtrl.$setViewValue(date);

                            validateDates();  
                            formatDates();           

                            function validateDates() {
                                console.log("customDatepicker.validateDates()");

                                // if arrivalDate is empty. Set.
                                if(scope.searching.arrivalDate == undefined || 
                                   scope.searching.arrivalDate < scope.searching.departureDate) {
                                    var arrivalDate = new Date(scope.searching.departureDate);
                                    arrivalDate.setDate(arrivalDate.getDate() + 1);        
                                    scope.searching.arrivalDate = arrivalDate;                          
                                    $("#checkoutDate").datepicker("option","minDate", arrivalDate);                                     
                                }
                            } 
                            function formatDates() {
                                if (scope.searching.departureDate != undefined) {
                                    var departureDateAux = new Date(scope.searching.departureDate);
                                    scope.searching.departureDate = $filter('date')(departureDateAux,'dd-MMM-yyyy');
                                }
                                if (scope.searching.arrivalDate != undefined) {
                                    var arrivalDateAux = new Date(scope.searching.arrivalDate);
                                    scope.searching.arrivalDate = $filter('date')(arrivalDateAux,'dd-MMM-yyyy');  
                                }                       
                            }                                                   
                        });
                    }
                });
            });                     
        }
    };
})

我正在尝试使用/ * CODE WITH PROBLEM BEGIN /和/ CODE WITH PROBLEM END *之间的代码添加语言环境功能 语言环境也在工作,但是当执行代码时,日历会自动显示在视图中,我的意思是,不需要单击输入字段。

我附上了一张快照。Calendar displayed by default

1 个答案:

答案 0 :(得分:0)

我修复了用以下代码替换热代码:

var locale = LocationService.getLangKey();
if (locale == 'en') {
   locale = '';
}
element.datepicker("option", $.datepicker.regional[ locale ] );
$("#ui-datepicker-div").hide();