Kendo - 无法在 kendo 日期范围组件中本地化字符串 "TODAY"
Kendo - Unable to localize the string "TODAY" in the kendo date range component
我正在 Kendo 网格上工作,我正在其中实施本地化并尝试翻译所有可见文本。
例如,我已经设法使用 kendo 网格消息组件在 kendo 网格上应用我的翻译,如下所示:
<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>
如您所见,我已将翻译应用到“清除”按钮。
目前它是这样的:
我没有手动翻译该日历中的属性(天、月),但它会自动选择当前用户语言。
现在我正在努力解决的问题是将按钮“TODAY”中的文本更改为中文。
- 我找不到 kendo-daterange
的任何自定义消息组件
- kendo-datepicker-messages 似乎是唯一一个包含“今天”属性的消息,但更改了我在系统中发现的所有时间并没有更新该日历。
我很高兴知道是否有人本地化了该文本。
谢谢
DateRange 有一个额外的组件来控制弹出窗口中的日历。它叫做 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>
我正在 Kendo 网格上工作,我正在其中实施本地化并尝试翻译所有可见文本。
例如,我已经设法使用 kendo 网格消息组件在 kendo 网格上应用我的翻译,如下所示:
<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>
如您所见,我已将翻译应用到“清除”按钮。
目前它是这样的:
我没有手动翻译该日历中的属性(天、月),但它会自动选择当前用户语言。
现在我正在努力解决的问题是将按钮“TODAY”中的文本更改为中文。
- 我找不到 kendo-daterange 的任何自定义消息组件
- kendo-datepicker-messages 似乎是唯一一个包含“今天”属性的消息,但更改了我在系统中发现的所有时间并没有更新该日历。
我很高兴知道是否有人本地化了该文本。 谢谢
DateRange 有一个额外的组件来控制弹出窗口中的日历。它叫做 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>