CODEWITHSUNDEEP
javascripthtmlangularinputdatepicker
JoseCarlosPB
JoseCarlosPB

Reputation: 875

It is possible to refresh ng date picker input value?

I'm trying to do a filter by range of dates, so I have a datepicker like this

  <form class="example-form">
       <mat-form-field style="width:100%">
          <input matInput placeholder="Rango de fechas a buscar" [(ngModel)]="dateRange"  name="Rango de fechas a  buscar" [owlDateTimeTrigger]="dt" [owlDateTime]="dt"
                          [selectMode]="'range'">
                          <owl-date-time [pickerType]="'calendar'" name="Rango de fechas" #dt></owl-date-time>
       </mat-form-field>
  </form>

Now on the component I have the following code

resetDate() {
let year = new Date().getFullYear();
let initialYear = "01/01/"+year;
let finalYear = "12/31/"+year;
this.dateRange[0] = new Date(initialYear);
this.dateRange[1] = new Date(finalYear);
}

The first time I load the page it works and the default filter is the current year, the problem is that if I pick any date with the datePicker and then on clearFilters I call again to resetDate, the value changes and the filter applies to the default dates (current year) but on the view, you still see the old picked date with the date picker

any way to fix the view?

Upvotes: 3

Views: 4381

Answers (2)

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can update reset method by reset array dateTimeRange

 resetDate() {
    let year = new Date().getFullYear();
    let initialYear = "01/01/" + year;
    let finalYear = "12/31/" + year;
    this.dateTimeRange = [];
    this.dateTimeRange.push(new Date(initialYear));
    this.dateTimeRange.push(new Date(finalYear));
  }

Demo https://stackblitz.com/edit/owl-datetimepicker-lmmxrk?file=src%2Fapp%2Frange%2Frange.component.ts

Upvotes: 1

Venkat smart
Venkat smart

Reputation: 112

I just found the solution myself,

<mat-form-field>
  <input matInput [(ngModel)]="fromDate" [matDatepicker]="from" (change)="onChangeEvent($event)" placeholder="From">

  <mat-datepicker-toggle matSuffix [for]="from"></mat-datepicker-toggle>
  <mat-datepicker #from></mat-datepicker>
</mat-form-field>

I had to update the [(ngModel)] to [(ngModel)]="fromDate" differently from [matDatepicker]="from".

Upvotes: 1

Related Questions