隐藏组件vaddin-date-picker

Question

我是vaadin的新手，他试图创建一个实例来隐藏组件数据选择器中的vaddin-text-filed。

我首先阅读了有关vaadin日期选择器的文档，其中涉及here所述的影子DOM属性。

我尝试使用“主题模块中的样式设置”，但是包括日历图标在内的所有内容都消失了。

当前代码如下，

render() {
    return html`
    <dom-module id="trim-inputbox" theme-for="vaadin-date-picker">
      <template>
        <style>
          :host(.special_field) [part="text-field"] {
          visibility:hidden;
          }
        </style>
      </template>
    </dom-module>
    <vaadin-date-picker class="special_field"></vaadin-date-picker>
    `;
}

再次非常感谢您的任何帮助。

Answer 1

您已经注意到，日历图标已成为文本字段本身的一部分。

在Styling section中，有一个使用<vaadin-date-picker-light>的示例：

<style>
   .my-input2 input {
     border: none;
     font-size: 14px;
     background: none;
   }
</style>

<vaadin-date-picker-light>
  <div class="my-input2">
    <iron-icon icon="event"></iron-icon>
      CHECK-IN:
       <iron-input>
         <input size="10">
       </iron-input>
    </div>
 </vaadin-date-picker-light>

也许您可以改用它？