Angular Kendo DatePicker: выберите месяц и день без года - PullRequest
Новая
       40

Angular Kendo DatePicker: выберите месяц и день без года

0 голосов
/ 31 октября 2019

Как отключить год в компоненте Angular Telerik 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>

Ответы [ 3 ]

1 голос
/ 31 октября 2019

Попробуете? 

<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>
0 голосов
/ 13 ноября 2019

Шаблон 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

Образец стиля может быть дополнительно отрегулирован по мере необходимости.

0 голосов
/ 31 октября 2019

Я быстро сделал небольшой Stackblitz , который показывает рабочее решение:

Возможные форматы даты, которые вы можете найти здесь:

https://github.com/telerik/kendo-intl#date-formatting

А вот документация плахолдера:

https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/placeholders/

Редактировать:

Два решения: Первое - скрыть только год можно, манипулируяпосле того, как календарь сделал. Второе - вы можете полностью скрыть строку, добавив следующий код к компоненту: 

encapsulation: ViewEncapsulation.None,
styles: ['.k-calendar tbody th { display: none; }'],

Для ViewEncapsulation должно быть установлено значение None, поскольку в противном случае стили не будут действовать. Стиль будет действовать только внутри компонента. Если вы хотите использовать это глобально, просто добавьте стиль в глобальный файл styles.css.

См. Оба решения в Stackblitz

Окончательное решение, которое работает:

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>
...