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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Limit time range on a DateTimePicker control

Thread ID:





145615 Jul 1,2019 11:23 AM UTC May 28,2020 08:12 AM UTC Angular - EJ 2 3
Tags: DateTimePicker
Asked On July 1, 2019 11:23 AM UTC


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

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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) { 
Please check the sample and get back to us, if you require any further assistance on this. 
Ashokkumar B. 

Replied On May 28, 2020 02:09 AM UTC


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 [Syncfusion]
Replied On 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.  
Sureshkumar P 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon