西班牙语datepicker无法正常工作

Question

我正在用西班牙语编写datepicker。日期选择器正在打开但无法选择日期。甚至我试图将该语言转换为西班牙语。它没有转换。

JSFidle.

var dimeapp = angular.module('dime', [])
  .controller('storeSrcWHController', function($scope, $http) {
    $scope.sortType = 'providerName'; // set the default sort type
    $scope.sortReverse = false; // set the default sort order

    $scope.dateChange = function(index, row) {
      console.log(row.startDateH);
    }

        $scope.tableData = [{
      "startDateH": "2011-06-11",
      "startDate": "11/06/2011"
    }, {
      "startDateH": "2011-03-12",
      "startDate": "12/03/2011"
    }, {
      "startDateH": "2011-07-13",
      "startDate": "13/07/2011",
    }];
  })
  .directive("datepicker", function() {
    return {
        restrict: "A",
        require: "ngModel",
        link: function(scope, elem, attrs, ngModelCtrl) {
            var updateModel = function(dateText) {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(dateText);
                });
            };
            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", "X", "J", "V", "S"],
                        weekHeader: "Sm",
                        dateFormat: "dd/mm/yy",
                        firstDay: 1,
                        isRTL: false,
                        showMonthAfterYear: false,
                        yearSuffix: ""
                    }
                }]
            };

            var options = {
                changeMonth: true,
                changeYear: true,
                yearRange: "1900:2300",
                buttonImage: "calendar.gif",

            };

            elem.datepicker(options);
            elem.datepicker(angular.copy(regionalOptions));
        }
    }

});

如果有任何错误，请告诉我。

Answer 1

您必须包含localization es datepicker

中的代码

final js

/* Inicialización en español para la extensión 'UI date picker' para 

jQuery. */
/* Traducido por Vester (xvester@gmail.com). */
(function(factory) {
  if (typeof define === "function" && define.amd) {

    // AMD. Register as an anonymous module.
    define(["../widgets/datepicker"], factory);
  } else {

    // Browser globals
    factory(jQuery.datepicker);
  }
}(function(datepicker) {

  datepicker.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", "X", "J", "V", "S"],
    weekHeader: "Sm",
    dateFormat: "dd/mm/yy",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ""
  };
  datepicker.setDefaults(datepicker.regional.es);

  return datepicker.regional.es;

}));


var dimeapp = angular.module('dime', [])
  .controller('storeSrcWHController', function($scope, $http) {
    $scope.sortType = 'providerName'; // set the default sort type
    $scope.sortReverse = false; // set the default sort order

    $scope.dateChange = function(index, row) {
      console.log(row.startDateH);
    }

    $scope.tableData = [{
      "startDateH": "2011-06-11",
      "startDate": "11/06/2011"
    }, {
      "startDateH": "2011-03-12",
      "startDate": "12/03/2011"
    }, {
      "startDateH": "2011-07-13",
      "startDate": "13/07/2011",
    }];
  })
  .directive("datepicker", function() {
    return {
      restrict: "A",
      require: "ngModel",
      link: function(scope, elem, attrs, ngModelCtrl) {
        var updateModel = function(dateText) {
          scope.$apply(function() {
            ngModelCtrl.$setViewValue(dateText);
          });
        };

        var options = {
          changeMonth: true,
          changeYear: true,
          yearRange: "1900:2300",
          buttonImage: "calendar.gif",

        };

        elem.datepicker(options);

      }
    }

  });

updated fiddle