Блог

Главная - Вопросы по программированию - Скрыть кнопку переключения календаря в Kendo Angular DatePicker

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

#angular #kendo-ui #kendo-ui-angular2

#angular #kendo-пользовательский интерфейс #kendo-ui-angular2

Вопрос:

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

   .k-select {
    display: none;
  }

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

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

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

Ответ №1:

Попробуйте это с 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);
}

Комментарии:

1. Спасибо, но это не работает. Это работает, когда я вызываю $('.k-select').css('display','none') в консоли браузера, но CSS не работает.

2. Теперь я заработал с ViewEncapsulation, смотрите Мой обновленный ответ для примера.

3. Хорошо, это работает. Но как узнать последствия изменения? Это изменение где-нибудь нарушит дизайн моего приложения?

4. Я наконец нашел способ сделать это без изменения поведения всего компонента. Смотрите мой ответ. Спасибо за помощь.

Ответ №2:

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

your_component.scss:

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

your_component.html:

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