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>

在Kendo Angular DatePicker上隐藏切换日历按钮

2 个答案: