Start Time and End Time validation is not Working

[sai revanth]

Hi Team,

Validation is not working for Start Time and End Time, Can you please help me with the Example.

Thanks 

[sai revanth]

Validation which I am looking into

1) Event cannot be created the past day

2) if the Start time and end time are same the Event should not able to save the event.

please help me achieve this two,

Thanks in Advance

[Keerthana Rajendran]

Hi Sai Revanth, 

 

Thanks for contacting Syncfusion support.  

 

We checked your query with DateTimePicker and request you to follow the below UG links for EJ1 DateTimePicker. 

 

UG: https://help.syncfusion.com/angular/datetimepicker/getting-started#set-mindatetime-and-maxdatetime 

 

API: https://help.syncfusion.com/api/js/ejdatetimepicker#members:validationrules 

 

To proceed further with a sample, we would like to confirm whether you reported scenario is EJ1 DateTimePicker or EJ2 DateTimePicker. 

 

EJ2 Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/datetimepicker/reactiveform 

 

Please revert with the exact platform(EJ1 or EJ2) to serve you better. 

 

Regards, 

Keerthana R. 

[sai revanth]

Hi Keerthana,

I am using EJ2 , Please find the Screenshot , I am looking to disable or validate Past Day (User shouldn't be able to create any events in the past days, its should be avaliable for present or future days only)    and also I am able to create an event with same start time and end time( User shouldn't be able to keep same date for start time and end time) as well, Please help me with this.

Thnaks in Advance

[Berly Christopher]

Hi Sai Revanth, 

  

We can achieve the requested requirement “User shouldn't be able to create any events in the past days, its should be available for present or future days only” with help of min and max property in the DateTimePicker component.  

  

UG Link: https://ej2.syncfusion.com/angular/documentation/datetimepicker/date-time-range/  

  

Demo Link: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/datetimepicker/date-time-range  

  

Sample: https://stackblitz.com/edit/angular-5slpcb?file=app.component.html  

  

Also, we would like to inform you that there is no start time and end time properties available in the DateTimePicker component. So, we suggest you to share more details about this requirement “User shouldn't be able to keep same date for start time and end time” such as whether you have rendered two date timepicker components and handled start time and end time to proceed further from our end. 

  

Regards, 

Berly B.C 

[sai revanth]

Hi Berly,

Please find the screenshot,
in the pop-up where we see start and end fields, I wanted to use requirement(where start and end time shouldn't be same ) need to validate it, how can I achieve that ? please help me with that

Thanks in advance.

[Praveenkumar Narasimhanaidu]

Hi Sai, 

  

Thanks for your update. 

  

We have validated your requirement at our end, and you can achieve it with the help of the scheduler popupClose event. for the same, we have prepared a sample which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/ej2-angular-scheduler-time-validation?file=app.component.ts 

  

App.component.ts 

onPopupClose(args) { 

    if (args.type === 'Editor') { 

      if (args.data.StartTime.getTime() === args.data.EndTime.getTime()) { 

        args.cancel = true; 

        alert('StartTime and EndTime are same'); 

      } 

    } 

  

Kindly try the above solution and get back to us if you need any further assistance. 

  

Regards, 

Praveenkumar 

[sai revanth]

Hi Praveen Kumar,
Thank you so much for your response, also i have one last question 

I have used date validation, please see the screenshot below

1) good thing I cannot create an event in the past day, but events from past are not displaying.   
     is it possible to display but not edit them for past days???????
2)and if you see today date is 12/16 but the date validation is applied for today as well, which is weird when i open a pop-up to schedule a new event it displays right, Please see the screenshot

look at the code snippet below ,Thanks in Advance

[Praveenkumar Narasimhanaidu]

Hi Sai, 

Thanks for your update. 

Please find the responses for your queries below. 

Q1: good thing I cannot create an event in the past day, but events from past are not displaying.   
     is it possible to display but not edit them for past days??????? 

 

Yes, it’s possible. But while preparing sample for this requirement, we noticed some problem and confirmed that as defect at our end. we have logged below bug feedback and the fix for this issue will be included in our weekly patch release which is expected to be rolled out on December 28, 2021. We would appreciate your patience until then. 

Feedback: https://www.syncfusion.com/feedback/31306/display-events-within-mindate-range 

Q2: and if you see today date is 12/16 but the date validation is applied for today as well, which is weird when i open a pop-up to schedule a new event it displays right 

We suspect you have added “Today”s date as minDate which might be the reason for reported problem. To overcome this problem, make sure the minDate as one day lesser than the today. For the same, we have modified sample, which can be viewed from following link. 

Sample: https://stackblitz.com/edit/ej2-angular-scheduler-time-validation?file=app.component.ts 

  public date: Date = new Date(); 

  public minDate: any = this.date.setTime( 

    this.date.getTime() - 1 * 24 * 60 * 60 * 1000 // 1 day lesser than today 

  ); 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Praveenkumar 

[Satheesh Kumar Balasubramanian]

Hi Sai, 

  

Sorry for the delay. 

  

Could you please confirm that whether you need to show existing events beyond min date and not want to edit them? 

  

Regards, 

Satheesh Kumar B