时间戳

首页 > 解决方案 > 角度的剑道日期选择器不会翻译剑道网格中的消息

angular - 角度的剑道日期选择器不会翻译剑道网格中的消息

问题描述

我遇到的问题是，当在 Kendo Grid 单元格中实施时 - 日期选择器保留默认消息“今天”和“切换”英文文本，而所有其他文本（月和日）似乎都被正确翻译，使用导入的 IntlModule 和提供的 LOCALE_ID。这是我的html：

<kendo-grid-column field="endDate"
        title="{{ 'time.finalDate' | translate: { min: 'no' } }}"
        filter="date"
        editor="date"
        format="{0:dd/MM/yyyy}">
        <ng-template kendoGridCellTemplate let-dataItem let-filter let-column="column">
            {{ dataItem.endDate | dateLocalized }}
        </ng-template>
        <ng-template KendoGridEditTemplate
            let-dataItem="dataItem"
            let-column="column"
            let-formGroup="formGroup">
            <kendo-datepicker ngDefaultControl
                #datepicker
                [format]="'dd/MM/yyyy'"
                [value]="dataItem[column.field]"
                [formControl]="formGroup?.controls[column.field]">
                <kendo-datepicker-messages today="Hoy"
                    toggle="Cambiar calendario">
                </kendo-datepicker-messages>
            </kendo-datepicker>
        </ng-template>
    </kendo-grid-column>

我的模块：

import { NgModule, LOCALE_ID } from '@angular/core';
import { CurrencyExchangeComponent } from './components/currency-exchange.component';
import { IntlModule } from '@progress/kendo-angular-intl';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';

@NgModule({
  declarations: [CurrencyExchangeComponent],
  imports: [
    IntlModule,
    DateInputsModule
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'es-ES' }
  ],
  exports: [CurrencyExchangeComponent]
})
export class CurrencyExchangeModule { }

我也在网格之外以一种形式尝试过它，它似乎可以工作，翻译所有内容，但在网格内部，kendo-datepicker-messages 似乎不起作用。任何人都可以帮忙吗？

标签： angularkendo-uikendo-gridkendo-datepicker

解决方案

好吧，似乎我已经找到了“为什么”这个问题的答案，但我仍然不知道如何解决它。

事实证明，Grid Kendo 内部实际上并没有显示我在 KendoGridEditTemplate 中的日期选择器。这是因为我在kendo-grid-column上有属性editor="date"。所以它似乎显示了一个内部日期编辑器（很可能是日期选择器，因为它看起来完全一样）。而且我无权访问这个，以便将 kendo-datepicker-messages html 与这些字段的翻译放在一起。我已经尝试从列中删除 editor="date" ，但是它根本不显示任何日期选择器（似乎 KendoGridEditTemplate 不适用于内部的日期选择器）。

我注意到的另一个错误是，在 Grid 中，日期选择器 (editor="date") 运行良好，它在 formControl 中保存了一个有效的日期，但是如果在正常的formGrroup 中- 当不使用弹出窗口并且手动输入值 - 它在 formControl 中返回简单字符串，这会在将其解析为有效的 JavaScript 日期实例以将其作为日期保存到服务器时导致问题（当格式为dd/mm/yyyy时，解析它不会与 2020 年 4 月 11 日这样的日期配合得很好，因为它会将其解析为格式为 mm/dd/yyyy）。

因此，我修改后的 html 如下（不需要 KendoGridEditTemplate）：

<kendo-grid-column field="endDate"
    title="{{ 'time.finalDate' | translate: { min: 'no' } }}"
    filter="date"
    editor="date"
    format="{0:dd/MM/yyyy}">
    <ng-template kendoGridCellTemplate let-dataItem let-filter let-column="column">
        {{ dataItem.endDate | dateLocalized }}
    </ng-template>
</kendo-grid-column>

推荐阅读