title: How to separate my start and end times in ionic datetime by 30 minutes
body: <p>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: <code>[{"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}]</code></p>
  
  <p>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:</p>
  
  <pre><code> private loadDocdate() {
  
      this.httpClient.get&lt;UserResponse&gt;('http://127.0.0.1:8000/api/medecin/details/' + this.medecinId, this.options).subscribe((data: any) =&gt; {
        this.DocPlanning = data.medecin.planning;
        console.log(JSON.stringify(this.DocPlanning.planningLines));
      });
    } 
  
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;ion-content fullscreen&gt;
    &lt;ion-text style="font-weight: bold; text-align: center"&gt;Choisissez votre Date&lt;/ion-text&gt;
    &lt;p-calendar [hidden]="dateValue" [(ngModel)]="dateValue" [inline]="true" [locale]="fr" dateFormat="dd-mm-yy"
    (click)="presentAlert()"&gt;
    &lt;/p-calendar&gt;
     &lt;div&gt;
      &lt;p-calendar [hidden]="!dateValue" [(ngModel)]="value" [timeOnly]="true" hourFormat="24"
       &gt;&lt;/p-calendar&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>I would like a display like it is on the picture:
  <a href="https://i.stack.imgur.com/6TNno.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6TNno.png" alt="timepicker"></a></p>
  
  <p><strong>HTML's presentAlert() function</strong></p>
  
  <pre><code>  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 =&gt; {
        if (element.day === this.days &amp;&amp; element.isFree === true ) {
          this.getAlert();
          let slots = this.getTimeSlots(element.startHour, element.endHour);
          console.log(slots);
  
        }
  
        if (element.day === this.days &amp;&amp; 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();
    }
  </code></pre>
  
  <p>Thanks</p>