Скрыть кнопку календаря на Kendo Angular DatePicker

Question

Я хотел бы использовать Kendo Angular DatePicker и , чтобы переместить «Переключить кнопку календаря» в другое место, где (плавающая панель инструментов).Вот почему я не использую DateInput элемент управления.Я пытаюсь скрыть кнопку переключения внутри ввода с помощью css, но это не работает:

  .k-select {
    display: none;
  }

Даже если эта команда jquery в консоли браузера работает:

$('.k-select').css('display','none')

Какмогу ли я сделать это?У меня есть другой способ переместить эту кнопку.

Answer 1

Вам просто нужно использовать селектор псевдокласса ::ng-deep для доступа к элементу.

your_component.scss:

::ng-deep .hiddenCalendarControl .k-select {
  display: none;
}

your_component.html:

<kendo-datepicker
  class="hiddenCalendarControl"
  ...
></kendo-datepicker>

Answer 2

Попробуйте это с ViewEncapsulation, см. Пример ниже:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <style>
    .k-datepicker .k-select {
        display: none;
      }

      .k-datepicker .k-picker-wrap {
        padding: 0;
      }

      .k-datepicker .k-input {
        border-radius: 3px;
      }
    </style>

        <div class="example-wrapper" style="min-height: 400px">
            <p>Select a date:</p>
            <kendo-datepicker
                [(value)]="value"
            ></kendo-datepicker>
        </div>
    `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  public value: Date = new Date(2000, 2, 10);
}