Today button on datepicker

[Goran]

Hi support team,

i'm working on angular , .NET app and i'm using syncfusion datepicker. For now everything works perfectly fine but i need to bind an event on built in today button that i have on footer. I've already usedonChange,onSelectDate andonNavigate events and now i need to trigger some specific function when i press today button. I've also tried to accomplish this by old school jquery events and unfortunately without success. Question is , is there any event (like above mentioned onChange, onNavigate etc) that is related only with today button that i can use to call my custom functions when today button is pressed.

Thanks!

Best regards, Goran.

[Sasikala Nagarajan]

Hi Goran,   

  

Thanks for contacting Syncfusion support.  

  

Currently, there is no in-built option to trigger event on today button click event. But you can bind the click event to today button with help of jQuery. Also, the popup of the DatePicker will be rendered only when it gets open at first time. So, we need to bind the event only after the popup rendered. Hence, we have bound the event in open event of popup. To avoid multiple binding, we have used flag variable bindFooter.   

  

Please refer to the below code example:   

  

var bindFooter = false;   

    $(function() {   

        $("#date").ejDatePicker({ open: function() {   

          if (!bindFooter) {   

              $(".e-footer").bind("click", function() {   

                alert("Footer clicked");   

                var bindFooter= true;   

              });   

          }   

  

      }});   

    });   

  

Sample: http://jsplayground.syncfusion.com/wyr0oy0w   

  

Please get back to us if you need any further assistance.   

  

Regards,   

Sasikala Nagarajan    

[Goran]

Hi Sasikala,

thanks for quick response! At first sorry i didn't provide you precise information, i'm using DatePicker that has displayInline property set on true so basicly this type of calendar is always open so there is no need to worry about popup (which is state related for standard DatePicker). On other hand i did mention that i'm using Angular (more specific version number 5) and this approach doesn't work or at least i didn't succeed to implement this correctly. In  -jsplayground- example that you have attached you have used standard Javascript code implemented directly in HTML page were DatePicker is placed. I assume that you know that in Angular ( 2 and higher ) you need to place your  Javascript/Typescrip code in component.ts file  which is separated from component.html where you actually place DatePicker and there should be some event handler in component.html which should call your code from component.ts file. So could you please provide some example with Angular implementation (what should be placed in .ts and what in .html file of component ).

Once again thanks for quick response and sorry for inconvenience!

Best regards, 

Goran.

[Sasikala Nagarajan]

Hi Goran, 

Sorry for the inconvenience caused, 

We have prepared the sample with EJ-Angular and updated the sample in below location 

Sample: http://www.syncfusion.com/downloads/support/forum/136007/ze/angular2-seeds_(2)-378714661 

Also in this sample  we have used create event of DatePicker component to bind the event to footer element. Please refer the below code example of home.component.ts file and home.component.html file. 

onCreateDate(args) { 

      $(".e-footer").bind("click", function() { 

                alert("Footer clicked"); 

            }); 

     } 

<div id="datepick" ej-datepicker [(displayInline)]="displayInline" (create)="onCreateDate($event)"> </div>  

Please check with the samples and let us know if you need any further assistance, 

Regards, 

Sasikala Nagarajan  

[Goran]

HiSasikala,

once again thanks for quick response and sorry for delay. Code that you have sent me is correct and it works perfectly fine for some purposes like this one that you have used (opening alert, or dialog pop up etc.). But if you try to use any kind of Typescript functions or properties defined in same file you will receive this kind of error.

The property 'value' does not exist on value of type 'HTMLElement'

It looks like i can't use any kind of properties that are not HTML elements. I'v tried to google this error and there are a lot of articles that are related with this kind of problem but nothing suggested works for me.

Any help for this?

Thanks!

Kind regards,

Goran.

[Sasikala Nagarajan]

Hi Goran, 

We have checked with your query.  As specified in given stack overflow solution have to specify <HTMLInputElement> before getting element. But if it will help us to if you share the any samples code to know about how your processed the element in typescript and it will help us to share the working sample too and provide the exact solution. 

So please provide any sample code or reproduce the issue in already given sample and revert to us. 

Regards, 

Sasikala Nagarajan 

[Goran]

Hi Sasikala, 

here is some code snippet that will more precisely explain problem that i'm talking about:

Content of component.html file:

 <div id="datepick" ej-datepicker [(displayInline)]="displayInline" (create)="onCreateDate($event)"> </div> 

Content of component.ts file:

startDate: any;
endDate: any;

constructor(){
     this.startDate = "2018-01-01";

     this.endDate = "2018-01-31";
}

private getData(start: any, end: any): any{
     // return data for given period
}

onCreateDate(args) {

        $(".e-footer").bind("click", function () {

            this.getData(this.startDate , this.endDate);

        });

} 

For red highlighted properties i'm getting errors:
-Property 'getData/startDate/endDate' doesn't exist on type 'HtmlElement'

On other hand i have button that is not related with ejCalendar and it has it's own method for click event that is called when you press button and this works perfectly fine.

private buttonClick(): void{
     this.getData(this.startDate, this.endDate);
}

I have already tried various solutions that are suggested on stackoverflow but that are not related directly with syncfusion controls, including casting with <HtmlInputType> and nothing works for this.

i hope that i'v described more precisely my current problem.

Best regards,

Goran. 

[Sureshkumar P]

Hi Goran,  

  

We have checked your code block and we are able to reproduce your reported issue. The issue caused because of accessing the “this” object inside the html element is not working. We need to copy the “this” object above the click event function. Please refer the below code example. 

 

onCreateDate(args) { 

         let proxy : any = this; 

      $(".e-footer").bind("click", function() { 

                alert("Footer clicked"); 

                proxy.getData(proxy.startDate,proxy.endDate); 

            }); 

     } 

 

In above code block we have assigned this object to variable proxy and proxy can be used to call the private function getData on clicking today button. 

 

Regards, 

Sureshkumar P 

[Goran]

Hi Sureshkumar, 

it finally works! Thanks for responses! 

Best regards, 

Goran.

[Sureshkumar P]

Hi Goran, 

 

Thanks for your update, 

 

Please let me know if you have any concerns. 

 

Regards, 

Sureshkumar P