Using Datepicker Range in Angular!

I’ll be writing about datepicker component that i have used one of my projects. It is like a general problem to use date and types in every programming languages. So I just wanted to share my little experience about primeng’s datepicker component and filtering a datatable with date range. Primeng’s Range calender has no filter attribute to range dates.

Filter constraints are;

filterConstraints: {
startsWith(value: any, filter: any): boolean;
contains(value: any, filter: any): boolean;
endsWith(value: any, filter: any): boolean;
equals(value: any, filter: any): boolean;
notEquals(value: any, filter: any): boolean;
in(value: any, filter: any[]): boolean;
lt(value: any, filter: any): boolean;
lte(value: any, filter: any): boolean;
gt(value: any, filter: any): boolean;
gte(value: any, filter: any): boolean;
};

Adding own date-range filter method

I am using p-calender in my html file which is contained in my component folder.

<p-calendar placeholder="Choose Date" [(ngModel)]="rangeDates" selectionMode="range" readonlyInput="true" [style]={'width':'100%'}" [monthNavigator]="true"[yearNavigator]="true" yearRange="2000:2030" dateFormat="yy-mm-dd"(onSelect)="dt.filter($event.target.value, col.field ,'myFilter')"></p-calender>

Important! You need to call your method when your component starts to work. That means you can write your code inside ngOnInit()method by implementing onInit.

Here is the range method which is in my .ts file.

public calenderFilter() {
     this._table.filterConstraints['myFilter'] = (value: any, filter: any): boolean => {
          value = value.substring(0, 10);
          filter = this.convertDate(filter);
          if (this.rangeDates["1"] === null) {
               if (value === filter) {
                    return value == filter;
               }
          } else {
                 let startDate = this.convertDate(this.rangeDates["0"]);
                 let finishDate = this.convertDate(this.rangeDates["1"]);
                      if (startDate <= value && finishDate >= value)                                                  {                          
                           return true;
                      }
}
}
}

Using the variable rangeDates declared and bound with ngModel.