Angular4: need filter on start data and end date select

nav a

8y1.3kAngular

need to write code for two select box to filter on click.

//please correct the pipe
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
@Pipe({
name: 'filterMonthYear'
})
export class FilterMonthYearPipe implements PipeTransform {
transform(value:any, startmonth: string, endmonth : string): any{
if(value.length === 0){
return value;
}
const resultArray = [];
console.log(startmonth);
console.log(endmonth);
var from_date = Date.parse(startmonth);
var to_date = Date.parse(endmonth);
for(const item of value)
{
if(item.startmonth > from_date && item.endmonth < to_date) {
resultArray.push(item);
}
};
return resultArray;
}
}

html

<label>Start Monthlabel>
<select class="form-control" name="selectedstart" [(ngModel)]="selectedstartmonth">
<option >Choose..option>
<option *ngFor="let table of TableData" >{{table.startmonth}}option>
select>
<p>{{selectedstart}}p>
div>
<div class="col-xs-6 col-sm-6 col-md-6">
<label>End Monthlabel>
<select class="form-control" name="selectedend" [(ngModel)]="selectedendmonth">
<option >Choose..option>
<option *ngFor="let table of TableData">{{table.endmonth}}option>
select>
<button class="btn btn-primary" type="submit"
(click)="getFilteredDate(startmonth.value, endmonth.value)">
Submit
button>
<tr *ngFor="let table of TableData | filterMonthYear:selectedstartmonth:selectedendmonth">
<td class='td-group1'>{{table.description}}td>
<td>{{table.money}}td>
<td>{{table.test}}td>
<td>{{table.bbb}}td>
tr>

component.ts

getFilteredDate(startmonth, endmonth){
//what can be the logic
}

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

nav a8y ago
It is start month in the input as Jan/2017 and start month input as Feb/2018.
0
Jayakumar Balasubramaniam8y ago
I didn't get you, okay let me come in other way, can you send me some sample inputs that will be passed to your filter??

And sample value for item.startmonth and item.endmonth.
0
nav a8y ago
Yes Jayakumar there is one more options is data picker.frist we have to filter it from date picker,that I have done already done using ngx-bootstrap.that will allow the user to select month and year , after selecting that will convert to month and year in the input field.from there we need to filter.Just need to get the input data from input field then we need to filter with table transaction month and year.
0
Jayakumar Balasubramaniam8y ago
I don't see a datepicker control in your html code, so just wanted to know how you set value in selectedstartmonth.

It seems it is a dropdown and as you said if the dropdown values are like Jan/2018, Feb/2018, and so on.. then in your filter first we need to split the Month and year from the selected value for example "Jan/2018" has to be splitted as Jan and 2018 in 2 different variables.

Please confirm this, so I can help you.
0
nav a8y ago
Month and year only needs to filter from Json.not date.user will select only month and year from the date picker like jan/2018.
0
Jayakumar Balasubramaniam8y ago
May I know the DataType of SelectedStartMonth, SelectedEndMonth and item.StartMonth in pipe. I kust wanted to know you comparing the entire date or only the Month?
+1
nav a8y ago
Hi Jayakumar Thanks for the reply..I have changed but I need click function logic
0
Jayakumar Balasubramaniam8y ago
Hi,

The pipe is pure pipe, can you please make it as impure by using the property "pure: false" in your pipe decorator at the top of this code snippet.

The impure pipe will make a call to pipe transform whenever the transform method input changes, so you will get the expected result.

Thanks,
Jayakumar B
+2