Question

我使用了土星材料日期选择器来选择日期范围。

<mat-form-field>
     <input matInput placeholder="Choose a date " [satDatepicker]="picker"  [value]="date">
     <sat-datepicker #picker [rangeMode]="true"> 
     </sat-datepicker>
    <sat-datepicker-toggle matSuffix [for]="picker"> 
     </sat-datepicker-toggle>
</mat-form-field>

如何显示所选日期的值？我使用了{{date.value}}，但是没有用！请帮忙。

Answer 1

您传递给输入的值需要像：

let dateRangeDisp = {'begin': Date, 'end': Date};

因此要获取日期并立即显示它：

// Template
<mat-form-field>
  <input matInput
    [placeholder]="label"
    [satDatepicker]="picker"
    [value]="dateRangeDisp"
    (dateChange)="saveDate($event)">
  <sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
  <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
</mat-form-field>

// Code behind
saveDate(event: any) {
    // look at how the date is emitted from save
    console.log(event.target.value.begin);
    console.log(event.target.value.end);

    // change in view
    this.dateRangeDisp = event.target.value;

    // save date range as string value for sending to db
    this.field.value = new Date(event.target.value.begin) + "|" + new Date(event.target.value.end);
    // ... save to db
}

getDate() {
    // get your saved value from some service
    let savedRangeStr = someService.getSavedRange();

    /// now you retrieve the date value from db and format it correctly for display
    this.dateRangeDisp = {'begin': Date, 'end': Date};
    this.dateRangeDisp.begin = new Date(savedRangeStr.substring(0, savedRangeStr.indexOf("|")));
    this.dateRangeDisp.end = new Date(this.field.value.substring(savedRangeStr.indexOf("|") + 1, savedRangeStr.length));


  }

在土星材料日期范围选择器中显示日期值

1 个答案: