Question

我将日期从组件传递到模板日期选择器。在这里，我的问题是如何从模板（ HTML ）到组件（ TS ）文件中获取价值。像下面一样

startDate = new Date() || selected start date from date picker endDate = new Date(2019, 1, 20) || selected end date form date picker

TypeScript：

export class AppComponent {
  startDate = new Date();
  endDate = new Date(2019, 1, 20);
  form: FormGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      date: [{begin: this.startDate, end: this.endDate}]
    });
  }
}

HTML：

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

在这里，我默认情况下会传递日期，但是一旦日期选择了另一个范围，我将不知道如何在选定或更改值时获取值。我尝试了 ngModel ，但没有从变量中获取值。在这里，我提到了Stackblitz项目链接。

https://stackblitz.com/edit/angular-3gx6xx

Answer 1

只需添加

this.form.get('date').valueChanges
      .subscribe(res => console.log(res));

在构造函数中要么使用

this.form.valueChanges.subscribe(res => console.log(res));

，您还可以添加验证功能或其他功能

import { filter, map, startWith  } from 'rxjs/internal/operators';
....
   this.form.valueChanges
    .pipe(
      filter(() => this.form.valid),
      map(data => {
        // append last update time to result
        data.lastTime = new Date();
        return data;
      })
    )
    .subscribe(res => console.log(res));

Answer 2

从daterangepicker资料中获取选定的日期。在模板中调用（datesUpdated）API。

模板：

<input ngxDaterangepickerMd (datesUpdated)="datesUpdated($event)"> <input>

ts：

datesUpdated(range){
console.log(range.startDate._d);
console.log(range.endDate._d);
}

如何从日期范围的日期选择器中以物料角度

2 个答案: