如何使用带有jquery UI的angularJS在日期选择器中设置区域选项?

时间:2018-04-20 08:17:03

标签: angularjs jquery-ui

我需要在日期选择器中设置西班牙语语言周和月。我尝试下面的代码,但无法在日期选择器中获得这些区域选项。在此我使用动态组件字段。当在今天的起始fiels显示日期下一个字段显示基于第一个字段选择日期。所以在这个动态日期日期picker.This功能正常,但我需要动态语言。  例如:

app.directive('myDirective', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            agdate:'@',
            seldate:'@',
        },
        link: function(scope, element, attrs, ngModelCtrl){
            element.on("mouseenter" ,function(){
              var displayingDays =parseInt(scope.agdate);
              if(scope.seldate){
              var selected = scope.seldate;
              }else{
                 var selected =-0;
              }
              var regionalOptions = {
                      "regional": [{
                          "es": {
                              closeText: "Cerrar",
                              prevText: "<Ant",
                              nextText: "Sig>",
                              currentText: "Hoy",
                              monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio",
                                  "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"
                              ],
                              monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun",
                                  "jul", "ago", "sep", "oct", "nov", "dic"
                              ],
                              dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
                              dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
                              dayNamesMin: ["D", "L", "M", "M", "J", "V", "S"],
                              weekHeader: "Sm",
                              dateFormat: "dd/mm/yy",
                              firstDay: 1,
                              isRTL: false,
                              showMonthAfterYear: false,
                              yearSuffix: ""
                          }
                      }]
                  };
              attrs.minDate = selected;
              attrs.maxDate =  displayingDays;
                element.datepicker({
                    dateFormat: "dd/mm/yy",
                    //showOn: 'both',
                    minDate: selected,
                    buttonImage: "calendar.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);
                        });
                    }
                });
            });
        }
    }
});

我需要角度js。

1 个答案:

答案 0 :(得分:2)

本地区域选项适用于直接。

app.directive('myDirective', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            agdate:'@',
            seldate:'@',
        },
        link: function(scope, element, attrs, ngModelCtrl){
            element.on("mouseenter" ,function(){
              var displayingDays =parseInt(scope.agdate);
              if(scope.seldate){
              var selected = scope.seldate;
              }else{
                 var selected =-0;
              }
              attrs.minDate = selected;
              attrs.maxDate =  displayingDays;
                element.datepicker({
                    dateFormat: "dd/mm/yy",
                    minDate: selected,
                    buttonImage: "calendar.gif",
                    closeText: "Cerrar",
                    prevText: "<Ant",
                    nextText: "Sig>",
                    currentText: "Hoy",
                    monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio",
                        "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"
                    ],
                    monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun",
                        "jul", "ago", "sep", "oct", "nov", "dic"
                    ],
                    dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
                    dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
                    dayNamesMin: ["D", "L", "M", "M", "J", "V", "S"],
                    weekHeader: "Sm",
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: "",
                    beforeShow: function(element, datepicker){
                        if(attrs.maxDate){
                            angular.element(element).datepicker("option", "maxDate", attrs.maxDate);
                        }
                    },
                    onSelect:function(date){
                        scope.$apply(function(){
                            ngModelCtrl.$setViewValue(date);
                        });
                    }
                });
            });
        }
    }
});