how to set regional Option in date picker using angularJS with jquery UI?

Question

I need to set spanish language weeks and months in date picker. I tried like below code but unable to get those regional option in date picker.In this I am using dynamic component fields.when at the starting fiels shows today date next field shows based on first field selected date.So in this dynamic date in date picker.This function working fine but I need in dynamic language. Eg :

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);
                        });
                    }
                });
            });
        }
    }
});

I need angular js.

Answer 1

the local regional option apply directy.

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);
                        });
                    }
                });
            });
        }
    }
});