We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Limit time range on a DateTimePicker control

Hello,

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

3 Replies

AB Ashokkumar Balasubramanian Syncfusion Team July 2, 2019 08:46 AM UTC

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(); 
        } 
      } 
    } 
  } 
 
 
Please check the sample and get back to us, if you require any further assistance on this. 
 
Regards, 
Ashokkumar B. 



DE Derick May 28, 2020 02:09 AM UTC

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?


SP Sureshkumar P Syncfusion Team May 28, 2020 08:12 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon