隐藏 Kendo Angular DatePicker 上的切换日历按钮答案

【问题标题】：Hide toggle calendar button on Kendo Angular DatePicker隐藏 Kendo Angular DatePicker 上的切换日历按钮
【发布时间】：2019-04-23 12:43:42
【问题描述】：

我想使用 Kendo Angular DatePicker 并将“切换日历按钮”移动到其他位置（浮动工具栏）。这就是我不使用DateInput 控件的原因。我尝试通过css隐藏输入中的切换按钮，但这不起作用：

  .k-select {
    display: none;
  }

即使浏览器控制台中的这个 jquery 命令有效：

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

我该怎么做？我还有另一种方法可以移动这个按钮。

【问题讨论】：

标签： angular kendo-ui kendo-ui-angular2

【解决方案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);
}

【讨论】：

谢谢，但这不起作用。当我在浏览器控制台中调用 $('.k-select').css('display','none') 时它可以工作，但 CSS 不起作用。
我现在可以使用 ViewEncapsulation，请参阅我更新的答案以获取示例。
好的，它工作。但是如何知道变化的含义呢？此更改是否会在某处破坏我的应用设计？
我终于找到了一种不改变整个组件行为的方法。看我的回答。感谢您的帮助。

【解决方案2】：

您只需使用::ng-deep 伪类选择器即可访问该元素。

your_component.scss：

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

your_component.html：

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

【讨论】：