Try to search your question here, if you can't find : Ask Any Question Now ?

Angular Material UI datepicker with range support?

HomeCategory: stackoverflowAngular Material UI datepicker with range support?
Avatarcraig asked 1 week ago

I googled Material UI Datepicker with range support.
and I found saturn-datepicker.

Yes Saturn-datepicker is what I was looking for.
But What I want to do is end date (1 week later since from date) is decided automatically when I click from date, not click both from date and end date.

I thought I can catch period variable when period value has changed like below.
But this._form.get('period').valueChanges works after both from date and end date has selected.

How can I set end date automatically after from date has clicked ???

html

<div class="m-form__control">
  <mat-form-field>
    <input matInput placeholder="Period" [satDatepicker]="picker" formControlName="period" (dateChange)="changeDate($event)">
    <sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
    <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
  </mat-form-field>
</div>

component

constructor(private fb: FormBuilderService) {
  this._form = this.fb.build(this.onDestroy$);
  this._form
    .get('period')
    .valueChanges.pipe(takeUntil(this.onDestroy$))
    .subscribe((value) => console.log('value = ', value));
} 

FormBuilderService

constructor(private fb: FormBuilder) {}

build(onDestroy$: Observable<never>): FormGroup {
    const now = moment();
    const end = now.toDate();
    const weekAgo = moment(now).subtract(7, 'days');
    const begin = weekAgo.toDate();
    return this.fb.group({
        period: [{ begin: begin, end: end }],
    });
}
1 Answers
Best Answer
AvatarMatthias answered 1 week ago
Your Answer

3 + 12 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com