Assigning the Values
this.sliderrange = [this.timestamp('2010.01.01'),this.timestamp('2014.01.01')]
this.chartRange.range = {
// min: new Date(this.fromDateString),
// max: new Date(this.toDateString)
min:this.timestamp('2010.01.01'),
max:this.timestamp('2014.01.01')
};
this.chartRange.values= [new Date('2012.01.01').getTime()/1000,new Date('2013.01.01').getTime()/1000];
Firing the Event on the slide
filterChart(data:any) {
console.log(new Date(data[0]1000).toDateString());
console.log(new Date(data[1]1000).toDateString());
console.log(data);
console.log('slider');
}
DateConverstion
timestamp(str){
return new Date(str).getTime()/1000;
}
Hi ,
Can any help how to create a range slider for dates in Angular 4.
I need to add the slider on the screen. I shall pass the array of dates. And we need to slide with start and end (2 way slider)
Based on the slider start and end date I will filter the data (using dates).
Here is my code:- html: <nouislider [config]="chartRange" [limit]="10" [(ngModel)]="sliderrange" (update)="filterChart($event)">
sliderrange: any=[]; chartRange: any = { behaviour: 'drag', connect: true, margin: 1, pips: { mode: 'steps', density: 5 }, values:[] };
Assigning the Values this.sliderrange = [this.timestamp('2010.01.01'),this.timestamp('2014.01.01')] this.chartRange.range = { // min: new Date(this.fromDateString), // max: new Date(this.toDateString) min:this.timestamp('2010.01.01'), max:this.timestamp('2014.01.01') }; this.chartRange.values= [new Date('2012.01.01').getTime()/1000,new Date('2013.01.01').getTime()/1000];
Firing the Event on the slide filterChart(data:any) {
console.log(new Date(data[0]1000).toDateString()); console.log(new Date(data[1]1000).toDateString()); console.log(data); console.log('slider');
DateConverstion timestamp(str){ return new Date(str).getTime()/1000;
}
And its not working. Thank you for the Help.
Venkat