角剑道DatePicker:选择没有年份的月份和日

Question

如何禁用角远程DatePicker组件中的年份？我正在尝试以下几种方法，但它不起作用。https://www.telerik.com/forums/datetimepicker-select-month-and-day-without-year

目前正试图将其应用于Html位置和隐藏年份，

<kendo-datepicker format="MMMM"
[formatPlaceholder]="{ month: 'mm', day: 'dd' }"
></kendo-datepicker>

我只想选择/显示月和日，没有年份。

年份应该在下面的图片中，

更新：

的最终解决方案：

openDatepicker(e: any) {

// timeout for waiting until rendering is done
setTimeout(() => {
  const headers = document.querySelectorAll('.k-calendar tbody th');
  headers.forEach(el => {          
    el.innerHTML = el.innerHTML.split(' ')[0];          
  });        
}, 0);
}

<kendo-datepicker 
    format="MMMM" 
    [formatPlaceholder]="{ month: 'mm', day: 'dd' }"
    (open)="openDatepicker($event)"
    >
    <ng-template kendoCalendarHeaderTitleTemplate let-title>
        {{title | slice : 0 : -4}}
    </ng-template>
    <ng-template kendoCalendarNavigationItemTemplate let-title let-date="date" let-view="activeView">
        {{view === 'month' && date.getMonth() === 0 ? 'Jan' : title}}
    </ng-template>
</kendo-datepicker>

Answer 1

你能试试吗？

<kendo-datepicker format="MMMM" [formatPlaceholder]="{ month: 'mm', day: 'dd' }">
  <ng-template kendoCalendarHeaderTitleTemplate let-title>
    {{title | slice : 0 : -4}}
  </ng-template>
</kendo-datepicker>

我们可以把这个放在左边；

<kendo-datepicker format="MMMM" [formatPlaceholder]="{ month: 'mm', day: 'dd' }">
        <ng-template kendoCalendarHeaderTitleTemplate let-title>
            {{title | slice : 0 : -4}}
        </ng-template>
        <ng-template kendoCalendarNavigationItemTemplate let-title let-date="date" let-view="activeView">
            {{view === 'month' && date.getMonth() === 0 ? 'Jan' : title}}
        </ng-template>
</kendo-datepicker>

Answer 2

CalendarHeaderTitle模板为顶部的标头元素提供内容，在滚动内容时始终是可见的。它不影响不同月份之间所有月份分隔元素的内容。

可以通过覆盖内置CSS来自定义布局，例如：

encapsulation: ViewEncapsulation.None,
styles: [`
  .k-calendar tr th[scope="col"]::after {
    content: '2000';
    background: white;
    color: white;
    height: 20px;
    width: 30px;
    display: inline-block;
    position: relative;
    right: 31px;
  }
`]

https://stackblitz.com/edit/angular-vhd8tt-lwsims?file=app/app.component.ts

样例样式可以根据需要进一步调整。