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

We need Onchange event for EJ1 DatetimePicker for angular 4 with Typescript

Thread ID:

Created:

Updated:

Platform:

Replies:

141838 Jan 7,2019 01:02 PM UTC Jan 8,2019 12:15 PM UTC Angular - EJ 2 1
loading
Tags: DateTimePicker
Muthukumar Periasamy
Asked On January 7, 2019 01:02 PM UTC

Hi team ,

We have project developed by Angular 4 with typescript and web api using EJ1 Components.

In that application , I have EJ1Date timepicker for Start Date and End Date in Dialog , My scenorio is calculate the Days difference between Start Date and End Date based on Changing the Date .

Please give some samples for me asap . We are already end of the Development Statge. 



Thanks,
Divakaran N 

Deepa Loganathan [Syncfusion]
Replied On January 8, 2019 12:15 PM UTC

Hi Divakaran N,  
 
Thanks for contacting Syncufsion support.  
 
We understood your requirement to find the number days difference between two DateTime values selected in Datetime picker.  
 
You can achieve this requirement as explained in the below code block.  
 
[App.Component.html] 
 
Start Date 
 
<input id="start" type="text" ej-datetimepicker (ejchange)="onChange($event)"/> 
<!-- Bind Change event in Datetimepicker --> 
 
End Date 
 
<input id="end" type="text" ej-datetimepicker (ejchange)="onChange($event)"/> 
<!-- Bind Change event in Datetimepicker --> 
 
 
 
Now in the Change event of Datetimepicker, you need to find the difference between the selected date and shown in the below code.  
 
[App.Component.TS] 
export class DateComponent { 
    public startDate: Date; 
    public EndDate: Date; 
    public dayCount: number; 
 
    public onChange(e){ 
 
    if(e.target.id == "end"){ 
        this.EndDate = new Date(e.value); 
        this.EndDate.setHours(0,0,0,0); // Reset time to midnight of the day 
    } 
    else if(e.target.id == "start"){ 
        this.startDate = new Date(e.value); 
        this.startDate.setHours(0,0,0,0); // Reset time to midnight of the day 
    } 
   
    if(!!this.startDate && !!this.EndDate){ 
        var diff = Math.abs(this.EndDate.getTime() - this.startDate.getTime()); // Get Timestamp by using getTime method 
        this.dayCount = Math.ceil(diff / (1000 * 3600 * 24));  
  alert(this.dayCount); 
   } 
}    
 
We have prepared a sample based on your requirement. Please download it from the below link and rune the below command to see the output. 
 
 
Command:  
 
1.      npm install 
2.      npm start 
 
Please let us know if you have any further concerns.  
 
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

Live Chat Icon For mobile
Live Chat Icon