直接使用 mat-datepicker 无需输入答案

【问题标题】：use mat-datepicker directly without input直接使用 mat-datepicker 无需输入
【发布时间】：2018-07-12 23:42:27
【问题描述】：

我想把日期选择器放在一个永久可见的边栏中，并且不依赖于输入，这可能吗？我想只要放置组件并添加 opens = true 就可以让日期选择器始终可见。

【问题讨论】：

你找到答案了吗？我正在尝试做同样的事情

【解决方案1】：

事实证明这是非常简单的，像往常一样导入 MatDatePickerModule，然后简单地使用 mat-calendar 选择器

<mat-calendar></mat-calendar>

为了通过打字稿挂钩选择

  @ViewChild(MatCalendar) _datePicker: MatCalendar<Date>

ngOnInit() {
    this._datePicker.selectedChange.subscribe(x => {
      console.log(x);
    });
  }

【讨论】：

你也可以做<mat-calendar [selected]="selectedDate" (selectedChange)="selectedDate = $event"> </mat-calendar> - 这避免了viewchild并且还使日历显示选择的日期
我同意@JonasPraem - 目前只渲染<mat-calendar></mat-calendar> 将始终使用今天的日期
readonly selectedChanged: EventEmitter<D>; * @deprecated 切换到输入元素上的dateChange 和dateInput 绑定。 * @deletion-target 6.0.0
哇... 太棒了...比全块 Angular Materials DatePicker 更整洁。但为什么它没有记录在任何地方？
请注意。对于 Material 版本 8，我必须导入 MatDatepickerModule（所以选择器中的 P 是小写的）

【解决方案2】：

你也可以尝试用 css ex 隐藏：

<mat-form-field style="width:1px;visibility:hidden;">
  <input matInput [matDatepicker]="picker" >
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-button (click)="picker.open()" ></button>

用css隐藏的好处是日期选择器是相对于隐藏的表单域定位的

【讨论】：

我设置了 [hidden]="true" 但它不起作用。并根据您的回答我使用 style="visibility:hidden;"它完全消失了。谢谢斯特凡；）
我也必须在我的模块的导入部分添加这些模块：MatFormFieldModule, MatInputModule
如何让图标可见，否则这是可行的解决方案。

【解决方案3】：

我发现的唯一可行的方法是大而笨拙但可行：

(partial credits)

HTML

  <mat-form-field id="dashboardComponent">
    <input matInput
      [matDatepicker]="matDatepicker"
      [formControl]="dateFormControl"
      (dateChange)="onDateChanged('change', $event)"
      [max]="datePickerMaxDate"
      >
    <mat-datepicker-toggle matSuffix [for]="matDatepicker"></mat-datepicker-toggle>
    <mat-datepicker #matDatepicker></mat-datepicker>
  </mat-form-field>

component.ts

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

export class MyComponent {

    // Date Picker
    public currentDate: Date = new Date() // set default here
    public dateFormControl: FormControl = new FormControl(this.currentDate)

css

/* DATE PICKER */
mat-form-field {
    margin: 0 0.5em; //adapt me to your needs
    width: 0.8em; //adapt me to your needs
    font-weight: normal;
}


#dashboardComponent {
    .mat-form-field-underline {
        background-color: transparent;
        height: 0;
    }
}

【讨论】：