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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Restrict time in DateTimePicker to business hours like scheduler or TimePicker component

Thread ID:

Created:

Updated:

Platform:

Replies:

143504 Mar 23,2019 04:25 AM UTC Apr 2,2019 06:05 AM UTC Angular - EJ 2 5
loading
Tags: DateTimePicker
Scott Eaton
Asked On March 23, 2019 04:25 AM UTC

Is it possible to restrict the hours in the DateTime picker?  It would be ideal to set a start and end time for each day of the week (a short day on Saturday).  If not is there anything like the TimePicker or Scheduler control that can prevent saving a time outside business hours?

Thanks,
SE

Deepa Loganathan [Syncfusion]
Replied On March 25, 2019 06:33 AM UTC

Hi Scott,  
 
Greetings from Syncfusion support.  
 
We have a demo sample in Timepicker that depicts your requirement to choose the time input in a specified range of values. Please check the below link.  
 
 
This sample uses two Timepicker inputs, in which the selection in second Timepicker will be set based on the value selected in first Timepicker.  
 
Please check and get back to us if you would require any further assistance.  
 
Regards,  
Deepa L. 


Scott Eaton
Replied On March 28, 2019 07:39 PM UTC

Sorry, I am a new developer and not sure how to apply this demo to the DateTimePicker control to get what I am looking for.  I am able to accomplish what I want with separate TimePicker and Calendar controls by setting the min/max for each. The question is if I can combine them using a single DateTimePicker control.  The date should be >= today and the time selection restricted to business hours.  Perhaps I just need to keep them separate for my use case?  Here is what I have currently that works:

html:
<ejs-calendar
formControlName="taskDate"
[showTodayButton]= "showTodayButton"
[min]='minDate'
placeholder='Date'
(renderDayCell)='onRenderCell($event)'
floatLabelType='Auto'
></ejs-calendar>

<ejs-timepicker
formControlName="taskTime"
[min]='minTime'
[max]='maxTime'
placeholder='Time'
[strictMode]='isStrictMode'
[step]='interval'
floatLabelType='Auto'
></ejs-timepicker>

ts:
public minDate: Date = new Date();
public minTime: Date = new Date('1/1/1999 8:00 AM');
public maxTime: Date = new Date('1/1/1999 9:00 PM');
public isStrictMode = true;
public interval = 15;
public showTodayButton = false;
public onRenderCell(args: any) {
if (args.date.getDay() === 0 || args.date.getDay() === 5) {
// sets isDisabled to true for Sunday and .
args.isDisabled = true;
}
}


Deepa Loganathan [Syncfusion]
Replied On April 1, 2019 06:04 PM UTC

Hi Scott, 
 
Sorry for the delay in responding your query.  
 
We have checked your requirement to disable time ranges in Datetimepicker. Sorry but this requirement is currently not feasible with Datetimepicker.  So, we have considered the reported scenario as the improvement in Datetimepicker that will be included in any one of our upcoming releases. We appreciate your patience until then. 
 
You could track the status of this feature in our feedback portal tool.  
 
 
If you have any specific requirement for this feature in your application, please add it as a comment in the above link and we will consider this in the initial implementation phase itself.  
 
Regards,  
Deepa L.  


Scott Eaton
Replied On April 1, 2019 08:22 PM UTC

Thank you for your consideration.

SE

Deepa Loganathan [Syncfusion]
Replied On April 2, 2019 06:05 AM UTC

Hi Scott,  

Thank you. Please let us know if you have any further queries.  

Regards,  
Deepa L. 


CONFIRMATION

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

;