Limit time range on a DateTimePicker control

Oliver

Asked On July 1, 2019 11:23 AM UTC

Hello,

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

Reply | Reply with quote

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) {

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.

Reply | Reply with quote

Derick

Replied On 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?

Reply | Reply with quote

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.

Regards,

Sureshkumar P

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
145615	Jul 1,2019 11:23 AM UTC	May 28,2020 08:12 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US