Limit time range on a DateTimePicker control

[Oliver]

Hello,

is it possible to restrict the time dropdown, on the datetimepicker control,  to specific time range? eg 8am to 8pm

[Ashokkumar Balasubramanian]

Hi Oliver, 

 

Greetings from Syncfusion support. 

 

Yes, possible. we can achieve your requirement by customize the li elements of the timepicker popup in the DateTimePicker with help of open event as mentioned in the below code example. 

 

  public startTimestart = "12:00 AM"; 

  public startTimeend = "8:00 AM"; 

  public endTimestart = "8:30 PM"; 

  public onOpen(args) { 

        if ((<any>this.myDate).popupObject) { 

            let elementCollection: any = (<any>this.myDate).popupObject.element.querySelectorAll(".e-datetimepicker.e-popup .e-list-parent.e-ul li"); 

      let flag: boolean = false; 

      for (var i = 0; i < elementCollection.length; i++) { 

                    let value:string = elementCollection[i].getAttribute('data-value'); 

        if (this.startTimestart === value || this.startTimeend === value || this.endTimestart === value) { // Check the component value with timepicker li element value 

                    flag = !flag; 

                } 

        if (flag) { 

              elementCollection[i].remove(); 

        } 

      } 

    } 

  } 

 

Sample Link: https://stackblitz.com/edit/angular-891bcb-ehxes4?file=app.component.ts 

 

Please check the sample and get back to us, if you require any further assistance on this. 

 

Regards, 

Ashokkumar B. 

[Derick]

Hello,

The above code does not work in my Angular application.  The following code in onOpen is always false:  if ((<any>this.myDate).popupObject)

How would I be able to remove unwanted time values from the datetimepicker time dropdown?

[Sureshkumar P]

Hi Derick, 

 

Thanks for your update.  

 

Based on your shared information, we suspect that you have used our previous updated code example in your angular CLI application. We cannot replicate the reported issue from our end in our angular CLI application. We suggest you handle the type conversion when access the private instance method. 

 

We have created the sample with angular CLI application. Please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateTimePIckerTimeRange-1677032377  

 

If you have still facing the issue, then please revert us with below details. 

1.     If any script error throws in your console window, then please share the issue details  

2.     Share any compilation issue you have faced  

3.     If possible, please replicate the reported issue in the above attached sample and revert us with detailed issue replication steps.  

These details will help us to provide exact solution as earlier as possible.  

 

Regards, 

Sureshkumar P