如何在 Angular 中使用我自己的管道格式化“kendo-datepicker”输入中的日期？答案

【问题标题】：How could I format the date inside the `kendo-datepicker` input using my own pipe in Angular?如何在 Angular 中使用我自己的管道格式化“kendo-datepicker”输入中的日期？
【发布时间】：2020-05-28 14:52:27
【问题描述】：

如何在 Angular 中使用我自己的管道格式化 kendo-datepicker 输入中的日期？

例如我可以通过以下方式将自己的管道应用于kendo-grid-column 中的日期：

<kendo-grid-column field="dueDate" [title]="'titles.dueDate' | translate">
   <ng-template kendoGridCellTemplate let-dataItem>
      {{dataItem.dueDate | localizedDate }}
   </ng-template>
</kendo-grid-column>

现在我想在kendo-datepicker 中做类似的事情。比如：

<kendo-datepicker formControlName="theDate">
   <ng-template kendoGridCellTemplate let-dataItem>
      {{dataItem.theDate | localizedDate }}
   </ng-template>
</kendo-datepicker>

我找到了these 模板，但我无法使用其中任何一个来达到预期的效果。期望的结果是kendo-datepicker 的输入中显示的值将是我的管道格式化的日期。

我知道format 属性。但这不是我想要的，因为它是静态的，我不想在整个项目中复制日期格式的逻辑（我的自定义管道正在做什么）。

【问题讨论】：

问题是，datePicker 不只是显示为网格。它也必须格式化您选择的日期。所以组件应该使用您的自定义管道作为格式化程序。好像有点难。

标签： angular kendo-ui datepicker pipe

【解决方案1】：

您是否正在寻找类似的东西：

    <div class="example-config">
        Selected value is: {{value | kendoDate:'hh:mm:ss a'}}
    </div>
    <div class="example-wrapper" style="min-height: 400px">
        <p>Select a time value:</p>
        <kendo-timepicker
            [(value)]="value"
        ></kendo-timepicker>
    </div>

【讨论】：