如何在 Angular 中制作滑块范围日期

如何解决如何在 Angular 中制作滑块范围日期

我尝试在 Angular 中创建一个带值日期的滑块范围，当代码第一次运行时，它显示了我在代码中设置的范围，但是当我尝试滑动它时，该值始终为 '01-01-1970 '如这张照片所示。

如何从声明的最小和最大日期获取值范围。 这是我现在拥有的代码：

谢谢:)

.html

 <div class="group">
  <p class="header">Created date range</p>
  <ul class="filter-list">
    <li>Range date :{{min | date: 'dd/MM/yyyy'}} - {{rangeValue | date: 'dd/MM/yyyy'}}</li>
  </ul>
  <ion-item>
    <ion-range [(ngModel)]="rangeValue" min="min" max="max" >
    </ion-range>
  </ion-item>
</div>
<hr>

.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,31);
      })
  }

解决方法

我只是设置月份的滑块值，而不是日期

我就是这样做的

.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

<div class="group">
  <p class="header">Created date range</p>
  <ul class="filter-list">
    <li>2020 {{fromMonth}} 01 - 2020 {{toMonth}} 01</li>
  </ul>
  <ion-item>
    <ion-range dualKnobs="true" pin={true} [(ngModel)]="ages" min="1" max="12" (ionChange)="myMethod(ages)" >
    </ion-range>
  </ion-item>
</div>