How to separate my start and end times in ionic datetime by 30 minutes

Question

I am using primeng calendar to manage the scheduling of medical appointments, and I would like that when I choose a date for a doctor, that his start and end times be divided into 30 minutes and be displayed in my html. Here is the json rendering of my doctor's planning data: [{"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}]

And I would like that for a given day that my html shows me the hours of the doctor (start and end time) in minutes of 30. Here is my ts where i retrieve the doctor's planning data:

 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));
    });
  }

And my 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>

I would like a display like it is on the picture:

HTML's presentAlert() function

  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();
  }

Thanks

Praveen Patel · Answer 1 · 2020-01-24T05:25:15.493

0

You can use momentjs for calculation in time

Ref: https://momentjs.com/

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)

edited Jan 24 '20 at 05:25

answered Jan 23 '20 at 07:00

Praveen Patel

349
7
24

in my case I would like to add 30 min to my start time until arriving at my end time, so how to do with my variables ? – Mohamed Sacko Jan 23 '20 at 15:01
Hi, your function works, I have the right layout in my console. But I would like to display on my page when a person chooses a date that the time slot is displayed and the person can choose a time. I updated my post and added the presentAlert function in my html. If you have a clue or an idea Thanks again – Mohamed Sacko Jan 24 '20 at 15:30
Will you please add your necessary code in https://stackblitz.com/edit/ionic-v4. This is better to fix. – Praveen Patel Jan 24 '20 at 16:01
Hi excuse me for my late, i've added the necessary code. This is the link : https://stackblitz.com/edit/ionic-v4?embed=1&file=src/app/app.component.ts – Mohamed Sacko Jan 26 '20 at 15:32
your code is not there, please login and then add you code & share – Praveen Patel Jan 27 '20 at 05:25
Sorry, here is the correct link: https://stackblitz.com/edit/ionic-v4-zcu93z?embed=1&file=src/app/app.component.html – Mohamed Sacko Jan 27 '20 at 15:58
I would like to display the result of the appointmentTime list in a popover or in a page to choose a time and confirm the appointment with the selected time and date. Thanks – Mohamed Sacko Jan 27 '20 at 16:01
you have added `'http://127.0.0.1:8000/api/medecin/details/'` this url in http service this is local url, that's why this does not work in stackbiltz. Please update url and check application is working in stackbiltz. I can't help until it is in working mode. – Praveen Patel Jan 28 '20 at 11:11

How to separate my start and end times in ionic datetime by 30 minutes

1 Answers1