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

[Scott Eaton]

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]

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.  

 

https://ej2.syncfusion.com/angular/demos/#/material/timepicker/time-range  

 

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]

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]

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.  

 

Link to feedback portal 

 

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]

Thank you for your consideration.

SE

[Deepa Loganathan]

Hi Scott,  

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

Regards,  

Deepa L.