我正在使用primeng日历来管理医疗约会的时间安排,我希望当我选择一个医生的日期时,他的开始和结束时间分为30分钟并显示在我的html中。
这是我医生的计划数据的json呈现:[{"id":18,"planning":null,"day":"Lundi","startHour":"08:00","endHour":"17:00","isFree":true},{"id":19,"planning":null,"day":"Mardi","startHour":"09:00","endHour":"18:00","isFree":true},{"id":20,"planning":null,"day":"Mercredi","startHour":"10:00","endHour":"19:00","isFree":true},{"id":21,"planning":null,"day":"Jeudi","startHour":"11:00","endHour":"20:00","isFree":true},{"id":22,"planning":null,"day":"Vendredi","startHour":"12:00","endHour":"21:00","isFree":true},{"id":23,"planning":null,"day":"Samedi","startHour":"00:00","endHour":"00:00","isFree":false},{"id":24,"planning":null,"day":"Dimanche","startHour":"00:00","endHour":"00:00","isFree":false}]
我想在给定的一天里,我的html以30分钟为单位显示医生的小时数(开始和结束时间)。 这是我在ts中检索医生的计划数据的地方:
private loadDocdate() {
this.httpClient.get<UserResponse>('http://127.0.0.1:8000/api/medecin/details/' + this.medecinId, this.options).subscribe((data: any) => {
this.DocPlanning = data.medecin.planning;
console.log(JSON.stringify(this.DocPlanning.planningLines));
});
}
还有我的HTML:
<ion-content fullscreen>
<ion-text style="font-weight: bold; text-align: center">Choisissez votre Date</ion-text>
<p-calendar [hidden]="dateValue" [(ngModel)]="dateValue" [inline]="true" [locale]="fr" dateFormat="dd-mm-yy"
(click)="presentAlert()">
</p-calendar>
<div>
<p-calendar [hidden]="!dateValue" [(ngModel)]="value" [timeOnly]="true" hourFormat="24"
></p-calendar>
</div>
</ion-content>
HTML的presentAlert()函数
presentAlert() {
const currentDate = this.dateValue;
const weekdays = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
this.days = weekdays[currentDate.getDay()];
console.log(this.days);
this.planningMedecin = this.DocPlanning.planningLines;
this.planningMedecin.forEach(element => {
if (element.day === this.days && element.isFree === true ) {
this.getAlert();
let slots = this.getTimeSlots(element.startHour, element.endHour);
console.log(slots);
}
if (element.day === this.days && element.isFree !== true) {
this.errorAlert();
}
});
}
async getAlert() {
const alert = await this.alertCtrl.create({
message: 'Low battery',
subHeader: '10% of battery remaining',
buttons: ['ok']
});
await alert.present();
}
async errorAlert() {
const alert = await this.alertCtrl.create({
message: 'La date que vous avez choisie est indisponible',
subHeader: 'Nous sommes desoles',
buttons: ['ok']
});
await alert.present();
}
谢谢
答案 0 :(得分:0)
您可以使用momentjs进行及时计算
Extract time from moment js object
let timeObj = moment("08:00", [moment.ISO_8601, 'HH:mm']);
let newTimeObj = moment(timeObj).add(30, 'm').toDate();
let newTime = moment(newTimeObj).format("HH:mm");
// calculate times between 2 timeslots with 30min diff
function getTimeSlots(startTime, endTime){
let startTimeObj = moment(startTime, [moment.ISO_8601, 'HH:mm']);
let endTimeObj = moment(endTime, [moment.ISO_8601, 'HH:mm']);
let appoitmentTimes = [moment(startTimeObj).format("HH:mm")]
while(startTimeObj<endTimeObj){
startTimeObj = moment(startTimeObj ).add(30, 'm').toDate();
appoitmentTimes.push( moment(startTimeObj).format("HH:mm"));
}
return appoitmentTimes
}
let slots = getTimeSlots('08:00','17:00');
console.log(slots)