隱藏Kendo Angular DatePicker上的切換日歷按鈕

Question

我想使用一個Kendo Angular DatePicker並將“切換日歷按鈕”移動到其他位置 （浮動工具欄）。 這就是我不使用DateInput控件的原因。 我嘗試通過css隱藏輸入中的切換按鈕，但這不起作用：

  .k-select {
    display: none;
  }

即使瀏覽器控制台中的這個jquery命令工作：

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

我怎樣才能做到這一點？ 我有另一種方法來移動這個按鈕。

Answer 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);
}

Answer 2

您只需使用::ng-deep偽類選擇器來訪問該元素。

your_component.scss：

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

your_component.html：

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