Question

我想对剑道的日期选择器使用现有的翻译（本地化）。我在git上找到了一些资源，但可能使用了错误的资源。这是我的HTML：

<!DOCTYPE html>
<html>
  <head>
    <base href="http://demos.telerik.com/kendo-ui/grid/angular">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.0.1/angular-translate.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
    <script src="kendo.culture.he.js"></script>
    
  </head>
  <body>
    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl">
        <p>{{ 'TITLE' | translate }}</p>
        <p>{{ 'FOO' | translate }}</p>

        <!-- the DropDown is used to change the culture -->
        <kendo-dropdownlist options="dropDownOptions" ng-model="lang"></kendo-dropdownlist>

        <!-- k-rebind="mainGridOptions.language" is used to force the widget update -->
        <kendo-grid options="mainGridOptions" k-rebind="mainGridOptions.language"></kendo-grid>

        <!-- k-rebind="calendarOptions.culture" is used to force the widget update -->
        <kendo-calendar options="calendarOptions" k-rebind="calendarOptions.culture"></kendo-calendar>
      </div>
    </div>

    <script>
      var app = angular.module("KendoDemos", [ "kendo.directives", "pascalprecht.translate"]);

      //set up the language provider (http://angular-translate.github.io/docs/#/guide)
      app.config(['$translateProvider', function ($translateProvider) {
       

      
        $translateProvider.translations('he-IL', {
          'TITLE': 'שלום',
          'FOO': 'זו פסקה'
        });
        $translateProvider.preferredLanguage('he-IL');
      }]);

      function MyCtrl($scope, $translate) {

        $scope.lang = "he-IL";

        $scope.calendarOptions = {
          culture: "he-IL"
        }

        $scope.dropDownOptions = {
          dataValueField: "value",
          dataTextField: "text",
          dataSource : {
            data: [{value:"he-IL",text:"עברית"}]
          },
          change: function(){

            /* The kendo.culture.xx-XX.js files can be pre-loaded in the <head> section of the document,
                    but the kendo.messages.xx-XX.js file should be loaded on demand when the language is about to change */

            /* We are using the jQuery.getScript method to load the messages file 
                    and use the callback function to change the kendo culture, kendo messages and angular-translate language */
          
            $.getScript("./assets/kendo.culture.he-IL.js", function() {

              /* $scope.$apply should be used in order to notify the $scope for language change */
              $scope.$apply(function(){

                $translate.use($scope.lang); //change angular-translate language
                kendo.culture($scope.lang); //change kendo culture

                /* we use dummy language option in order to force the Grid to rebind */
                $scope.mainGridOptions.language = $scope.lang;

                /* we change the calendar widget culture option in order to force the Calendar to rebind */
                $scope.calendarOptions.culture = $scope.lang;

              })
            });
          }
        }

        $scope.mainGridOptions = {
          dataSource: {
            type: "odata",
            transport: {
              read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
            },
            pageSize: 5,
            serverPaging: true,
            serverSorting: true
          },
          sortable: true,
          pageable: true,
          language: "english",
          columns: [{
            field: "FirstName",
            title: "First Name",
            width: "120px"
          },{
            field: "LastName",
            title: "Last Name",
            width: "120px"
          },{
            field: "Country",
            width: "120px"
          },{
            field: "City",
            width: "120px"
          },{
            field: "Extension"
          }]
        };
      }
    </script>
  </body>
</html>

首先，我不确定我是否正确使用了getScript("./assets/kendo.culture.he-IL.js"。我指的是本地路径（在我的项目中），而在示例中，我注意到它指向http url。另外，src-<script src="./assets/kendo.culture.he.js"></script>指向messages JS，它也是本地的。

事实上，它仍然以英文显示日期选择器顺便说一句，culture和messages文件均来自git：

kendo-ui-core

如何设置Kendo日期选择器的本地化？

0 个答案: