Блог

Я работаю над сеткой Kendo, где я реализую локализацию и пытаюсь перевести весь видимый текст.

Например, мне удалось применить мои переводы к сетке kendo, используя компонент сообщений kendo grid следующим образом:

 <kendo-grid-messages
        pagerPage="{{ 'PAGE' | translate }}"
        pagerOf="{{ 'OF' | translate }}"
        pagerItems="{{ 'ITEMS' | translate }}"
        pagerLastPage="{{ 'GO_TO_THE_LAST_PAGE' | translate }}"
        pagerNextPage="{{ 'GO_TO_THE_NEXT_PAGE' | translate }}"
        pagerPreviousPage="{{ 'GO_TO_THE_PREVIOUS_PAGE' | translate }}"
        pagerFirstPage="{{ 'GO_TO_THE_FIRST_PAGE' | translate }}"
        noRecords="{{ 'NO_RECORDS_AVAILABLE' | translate }}">
  </kendo-grid-messages>
 

Таким образом, я справился со своими собственными переводами — отлично.

Аналогично сделано для выпадающего списка:

 <kendo-dropdownlist-messages
    noDataText="{{ 'NO_DATA_FOUND' | translate }}"
  >
</kendo-dropdownlist-messages>
 

Фантастика!! Оба этих элемента html находятся внутри их соответствующих родителей.

Теперь у меня есть kendo-filter-date-range в моей сетке, которая выглядит следующим образом:

 <ng-template *ngIf="column.type === 'date'" kendoGridFilterCellTemplate let-filter let-column="column">
    <reporting-date-range-filter class="date-range-filter k-filtercell" [filter]="filter" [field]="column.field"
      [dateFormat]="dateFormat">
    </reporting-date-range-filter>
  </ng-template>
 

при детализации фактического компонента я получаю следующий код:

 <div class="date-filter-container">
  <kendo-daterange>
   <kendo-dateinput class="range-filter" kendoDateRangeStartInput formatPlaceholder="short" [format]="dateFormat"
  [value]="start" (valueChange)="filterRange($event, end)">
   </kendo-dateinput>-
   <kendo-dateinput class="range-filter" kendoDateRangeEndInput formatPlaceholder="short" [format]="dateFormat"
  [value]="end" (valueChange)="filterRange(start, $event)">
   </kendo-dateinput>
  </kendo-daterange>
  <button *ngIf="hasFilter" class="k-button k-button-icon" title="{{'CLEAR' | translate}}" (click)="clearFilter()">
  <span class="k-icon k-i-filter-clear"></span>
  </button>
</div>
 

Как вы можете видеть, я применил свой перевод к кнопке Очистить.

Вот как это выглядит на данный момент:

Я не переводил вручную атрибуты в этом календаре (дни, месяцы), но он автоматически выбрал текущий пользовательский язык.

Теперь, с чем я борюсь, так это с тем, чтобы изменить текст в кнопке «СЕГОДНЯ» на китайский в моем случае.

• Я не могу найти какой-либо пользовательский компонент сообщения для kendo-daterange
• kendo-datepicker-сообщения кажутся единственными, содержащими атрибут «сегодня», но изменение всех найденных в системе сообщений не привело к обновлению этого календаря.

Я буду рад узнать, если кто-нибудь когда-нибудь локализовал этот текст. Спасибо

Диапазон дат имеет дополнительный компонент, который управляет календарями во всплывающем окне. Он называется MultiViewCalendar.

Я думаю, что это должно сработать в вашем случае, вы можете игнорировать минимальные и максимальные даты:

 <kendo-daterange>
    <div class="form-group d-inline-block">
        <label class="label-control" [translate]="'dateFrom'"></label>
        <div class="d-inline-block"><kendo-dateinput class="form-control"  kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput></div>
    </div>
    <div class="form-group d-inline-block">
        <label class="label-control" [translate]="'dateTo'"></label>
        <div class="d-inline-block"><kendo-dateinput class="form-control" kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput></div>
    </div>
    <kendo-daterange-popup>
      <ng-template kendoDateRangePopupTemplate>
          <kendo-multiviewcalendar kendoDateRangeSelection [min]="minDate" [max]="maxDate">
            <kendo-multiviewcalendar-messages today="yourTranslation"></kendo-multiviewcalendar-messages>
          </kendo-multiviewcalendar>
      </ng-template>
  </kendo-daterange-popup>
</kendo-daterange>