时间戳

首页 > 解决方案 > Angular Material Date Range Picker 设置默认值

angular - Angular Material Date Range Picker 设置默认值

问题描述

我试图设置日期选择器打开的默认月份，基于从日历事件中获取的值。EG：你在四月你点击日历上的下个月，当你选择它在五月打开的日期选择器时

我环顾四周，很多问题都讨论了 DatePicker 而不是 RangeSelector，通常如何解决这个问题（据我所知）是：

//Adding a [Value] Bind to the Input and setting the Value
E.G 
<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" [value]="getTomorrow()">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

mat-date-range-input 没有 [Value] 属性

所以我不确定如何在范围选择器上设置“默认值：”值：

<mat-form-field appearance="fill">
  <mat-label>Click the Icon to select a Date</mat-label>
  <mat-date-range-input [formGroup]="range" >
       <input matStartDate formControlName="start" placeholder="Start date">
       <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
       <mat-datepicker-toggle matSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
       <mat-date-range-picker  #dateRangePicker></mat-date-range-picker>
                  
      <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
      <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>

日期选择器： 链接

我找到的关于如何设置普通单日期选择器的解决方案：

链接2

注意我使用范围选择器所以我的输入字段不同于普通的基本日期选择器。所以我不能使用 [Value] Bind 以同样的方式绑定。

ShortVersion：我想绑定到 mat-date-range-input 以设置它开始的默认月份

标签： angulardatepickerangular-material2

解决方案

它只是为 FormControls 赋予价值-如果您使用 formGroups，而不是使用 value-，例如

  this.range = new FormGroup({
      start: new FormControl(new Date(2021, 1, 15)),
      end: new FormControl(new Date(2021, 2, 16))
    });

推荐阅读