2个日期之间的类型脚本过滤

问题描述 投票:0回答:1

我过滤了您在图片中看到的搜索屏幕,但无法正常工作。当您在付款当天写03.03.2020时,它将带走所有记录。我想过滤付款日期和我的登录日期,并在两者之间进行记录。如何修复代码?

。html

<div class="rez">
    <input id="hotelName" type="text" placeholder="Enter Hotel Name" [(ngModel)]="hotelName" (ngModelChange)="changeHotelName()" /><br />
    <input class="textbox-n" placeholder="Enter check in date" [(ngModel)]="startDate" type="text" onfocus="(this.type='date')" id="entry" (ngModelChange)="changeStartDate()" />
    <input class="textbox-n" placeholder="Enter payDate" [(ngModel)]="endDate" type="text" onfocus="(this.type='date')" id="exit" (ngModelChange)="changeEndDate()" /><br />
    <label id="lblAdults">Number of adults</label> <label id="lblChilds">Number of childs</label><br />
    <input id="adult" type="number" [(ngModel)]="adult" (ngModelChange)="changeNumberOfAdults()" />
    <input id="child" type="number" max="3" [(ngModel)]="childCount" [(ngModel)]="chd" (ngModelChange)="changeNumberOfChilds()" />
    <label id="chd1" *ngIf="childCount>=1">Child Ages</label><br />
    <select class="custom-select" id="chd_1" *ngIf="childCount >= 1">
        <option selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <select class="custom-select" id="chd_2" *ngIf="childCount>=2">
        <option selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <select class="custom-select" id="chd_3" *ngIf="childCount>=3">
        <option selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <button id="search" class="btn btn-warning" type="button">Search</button> 
</div>

。ts

private isEqual(date1: Date, date2: Date) {
    return date1.getDate() == date2.getDate() && date1.getMonth() == date2.getMonth() && date1.getFullYear() == date2.getFullYear();
}

changeStartDate() {
    const filtered = this.hotels.filter(x => this.isEqual(new Date(x.checkInDate), new Date(this.startDate)));
    if (filtered) this.dsHotels.data = filtered;
    else return false;
}

changeEndDate() {
    const filtered = this.hotels.filter(x => this.isEqual(new Date(x.payDate), new Date(this.endDate)));
    this.dsHotels.data = filtered;
}

[图片]

https://i.stack.imgur.com/0IeDK.png
https://i.stack.imgur.com/ZDYCD.png
https://i.stack.imgur.com/wPguo.png
angular typescript
1个回答
0
投票

所以我认为问题是您需要检查过滤器中checkInDatepayDate是否都匹配。在当前代码中,一次仅检查其中一个值

我认为解决方法可能是这样的:

private isEqual(date1: Date, date2: Date) {
    return date1.getDate() == date2.getDate() && date1.getMonth() == date2.getMonth() && date1.getFullYear() == date2.getFullYear();
}

private isDataEqualToDate(value1: any, date2: Date) {
   if (value1 == null) return true;
   return isEqual(new Date(value1), date2);
}

private getFilteredHotels() {
   return this.hotels.filter(
     x => this.isDataEqualToDate(this.startDate, new Date(x.checkInDate))
       && this.isDataEqualToDate(this.endDate, new Date(x.payDate))
   );
}

changeStartDate() {
    this.dsHotels.data = this.getFilteredHotels();

}

changeEndDate() {
    this.dsHotels.data = this.getFilteredHotels();
}
© www.soinside.com 2019 - 2024. All rights reserved.