I have a form with a goal to enter a car rental order into the db. im using angular with ts, and firestore as my db.
im trying to disable some of the options when the entered dates are colliding with an existing order in the db.
each order in the db has a few relevant properties: car_id (id of car object as string) start (order start date as firebase timestamp) end (order end date as firebase timestamp)
in my template:
<input
type="date"
id="startDate"
class="form-control"
id="startInput"
name="start"
required
[(ngModel)]="order.start"
#startDate="ngModel"
max="{{ endDate.value }}"
/>
<input
type="date"
id="endDate"
class="form-control"
id="endInput"
name="end"
required
[(ngModel)]="order.end"
#endDate="ngModel"
min="{{ startDate.value }}"
/>
<select
class="form-select"
aria-label="Default select example"
name="car"
id="carInput"
[(ngModel)]="order.car_id"
#car="ngModel"
required
[disabled]="!startDate.dirty || !endDate.dirty"
>
<option *ngFor="let car of cars" value="{{ car.id }}" [disabled]="!checkCarAvailabillity(startDate.value,endDate.value,car.id)">
{{ car.manufacture + " " + car.model }}
</option>
</select>
in my code:
checkCarAvailabillity(startDate:Date, endDate:Date, carID:string|undefined):boolean{
let relevantOrders:Order[] = []
let result:boolean = true
this.allOrders.forEach((order)=>{
if(order.car_id == carID) relevantOrders.push(order)
})
relevantOrders.forEach((order)=>{
if(new Date(this.getDate(order.start))<=endDate && new Date(this.getDate(order.end))>=startDate) result = false
})
return result
}
getDate(timestamp:any){
let day = new Date(timestamp.seconds*1000).getDate()
let month = new Date(timestamp.seconds*1000).getMonth()
let year = new Date(timestamp.seconds*1000).getFullYear()
return day<10? `${month}/0${day}/${year}` : `${month}/${day}/${year}`
}
eventually the process I have made does not work... anyone can suggest why this isnt working? or maybe a better approach for this?
(regarding the checkCarAvailabillity function)