How to make slider range date in Angular

Question

I tried making a slider range with value date in Angular, when the code ran for the first time, it showed the range that I set in my code, but when I tried sliding it thevalue is always '01-01-1970' As seen in this picture.

How do I get the value range from the declared min and max date. This is the code I have now:

thank you :)

.html

 
  Created date range
  
    Range date :{{min | date: 'dd/MM/yyyy'}} - {{rangeValue | date: 'dd/MM/yyyy'}}

.ts

 public rangeValue:Date;
 public min: Date ;
  public max: Date ;
  public today: Date = new Date();
  public currentYear: number = this.today.getFullYear()-2;
  public currentMonth: number = this.today.getMonth();
  public currentDay: number = this.today.getDate();

  constructor(public navCtrl: NavController, 
    public Platform : Platform,
    ) {
      this.Platform.ready().then(() =>{
        this.rangeValue =  new Date(new Date().setDate(14));
        this.min =  new Date(this.currentYear, this.currentMonth, 1);
        this.max = new Date(this.currentYear, this.currentMonth, 31);
      })
  }

user_14988644 · Answer

i just set the slider value for the month, not for the date

this is how i do

.ts

public ages: any = {
    lower:0,
    upper:3
  };
public fromMonth; toMonth;
  public monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
  ];

 constructor(public navCtrl: NavController, 
public Platform : Platform,
private viewCtrl: ViewController,
public dataService: DataServiceProvider,
) {
  this.Platform.ready().then(() =>{
     this.ages = {lower: 2, upper:5};
     this.fromMonth = this.monthNames[parseInt(this.ages.lower)-1];
     this.toMonth = this.monthNames[parseInt(this.ages.upper)-1];
  })

}

.html


  Created date range
  
    2020 {{fromMonth}} 01 - 2020 {{toMonth}} 01

How to make slider range date in Angular

1 Answers