页面加载后,我想设置日期范围。日期范围选择器来自下面的链接。 https://www.npmjs.com/package/saturn-datepicker
因此,我可以看到默认的两周值将其发送到chart
并在日期范围选择器上显示该日期范围。我怎么做?我无法成功使用下面的代码。
打字稿
form: FormGroup;
inlineRange;
sendingDate: any;
@Output() sendDateEmitter = new EventEmitter<any>();
moment = extendMoment(Moment);
ngOnInit() {
let today = Moment();
let twoWeeksAfter = Moment().add(-14, "days");
let range = this.moment.range(today, twoWeeksAfter);
this.sendingDate = range;
}
constructor(fb: FormBuilder) {
this.form = fb.group({
date: new FormControl("date"),
// date: [{ begin: new Date(2018, 7, 5), end: new Date(2018, 7, 25) }],
});
}
DateChanged(value) {
this.sendingDate = value;
}
html
<div class="row">
<div class="col-xl-4">
<mat-form-field class="flex-container">
<div [formGroup]="form">
<input
[(ngModel)]="sendingDate"
matInput
placeholder="Choose a date"
[satDatepicker]="picker2"
formControlName="date"
(dateChange)="DateChanged($event.value)"
/>
</div>
<sat-datepicker #picker2 [rangeMode]="true"> </sat-datepicker>
<sat-datepicker-toggle
matSuffix
[for]="picker2"
></sat-datepicker-toggle>
</mat-form-field>
</div>
</div>
<div class="row">
<!-- ----------------------------------------------------------------------- -->
<!-- chart fields -->
<!-- ----------------------------------------------------------------------- -->
<div class="col-xl-6 chartPadding">
<h4 class="text-center">Chart1</h4>
<kt-chart1 [receivingDate]="form.get('date')?.value"></kt-chart1>
</div>
</div>