I want to change my table’s color like this,if I know someone take a vacation at 2018/03/29~2018/03/31. And the database just give me the Start day and the End day.
what should i do so that can be change color based on the two date?
thanks:grinning:
this is my code
.html
<ion-row col-12 class="example">
<ion-col ><div class="name">Name</div></ion-col>
<ion-col>{{systemday1|date:'MM/dd'}}</ion-col>
<ion-col>{{systemday2|date:'MM/dd'}}</ion-col>
<ion-col>{{systemday3|date:'MM/dd'}}</ion-col>
<ion-col>{{systemday4|date:'MM/dd'}}</ion-col>
<ion-col>{{systemday5|date:'MM/dd'}}</ion-col>
</ion-row>
<ion-grid>
<ion-row col-12 no-padding *ngFor="let Leave of absencedata" >
<button (click)="openTestPage()" ><div class="name" >{{Leave.name}}</div></button>
<ion-col [ngStyle]="{'background-color': getColor(Leave.Day1)}">{{Leave.Day1}}</ion-col>
<ion-col [ngStyle]="{'background-color': getColor(Leave.Day2)}">{{Leave.Day2}}</ion-col>
<ion-col [ngStyle]="{'background-color': getColor(Leave.Day3)}">{{Leave.Day3}}</ion-col>
<ion-col [ngStyle]="{'background-color': getColor(Leave.Day4)}">{{Leave.Day4}}</ion-col>
<ion-col [ngStyle]="{'background-color': getColor(Leave.Day5)}">{{Leave.Day5}}</ion-col>
</ion-row>
</ion-grid>
.ts
this.reservice.load()
.then(data=>{
this.leavedetail=data;
console.log(data);
})//return from Loopback
getColor(type){
switch(type){
case 'L':
return '#ff6666';
case 'B':
return '#ffff66';
}
provider.ts
export class RestserviceProvider {
leavedata:any;
baseUrl:string="http://localhost:3000/api/leavedates?filter=%7B%22order%22%3A%22Emplid%20desc%22%7D";
constructor(public http: Http) {
//console.log('Hello RestserviceProvider Provider');
}
load(){
return new Promise(resolve=>{
this.http.get(this.baseUrl)
.map(res=>res.json())
.subscribe(data=>{
this.leavedata = data;
resolve(this.leavedata);
})
})
}
}
and the data is writing at mysql like this
thanks a lot