1. Home
  2. Forum
  3. Angular
  4. Date format in tooltip

Date format in tooltip

Hi,

I'm following the documentation to format date fields in the tasks tooltip: My code is like this:

<script type="text/javascript">
        function _getTime(date) {
            return ej.format(new Date(date), "hh:mm");
        }
        //Here, used the helper function to get the date and time value part from the StartTime.
        $.views.helpers({
            timeDisplay: _getTime
        });
</script>

<script type="text/x-jsrender" id="tooltipTemplate">
        <table>
            <tr>
                <td style="padding:3px"><b>Start:</b></td>
                <td style="padding:3px">{{:~timeDisplay("startDate")}}</td>
            </tr>
            <tr>
                <td style="padding:3px"><b>End:</b></td>
                <td style="padding:3px">{{:~timeDisplay("endDate")}}</td>
            </tr>
        </table>
</script>

But it isn't working. The following errors appear when trying to display the tooltip:

Uncaught TypeError: Cannot read property 'helpers' of undefined
    at localhost/:44

ERROR TypeError: view.ctxPrm(...) is not a function
    at Object.eval [as fn] (eval at L (:3000/node_modules/jsrender/jsrender.min.js:3), <anonymous>:9:31)
    at F (:3000/node_modules/jsrender/jsrender.min.js:3)
    at Object.S [as render] (:3000/node_modules/jsrender/jsrender.min.js:3)
    at b (:3000/node_modules/jsrender/jsrender.min.js:3)
    at Function.eval [as fn] (eval at L (:3000/node_modules/jsrender/jsrender.min.js:3), <anonymous>:7:2)
    at F (:3000/node_modules/jsrender/jsrender.min.js:3)
    at Function.S [as render] (:3000/node_modules/jsrender/jsrender.min.js:3)
    at Object.ejGanttChartwc_monitoringtooltipTemplate (:3000/node_modules/jsrender/jsrender.min.js:3)
    at Object._mouseHover (:3000/node_modules/syncfusion-javascript/Scripts/ej/web/ej.gantt.min.js:10)
    at HTMLDivElement.eval (:3000/node_modules/syncfusion-javascript/Scripts/ej/common/ej.core.min.js:10)

Any idea?

Thanks.

3 Replies
PE Punniyamoorthi Elangovan Syncfusion Team July 19, 2018 02:07 PM UTC

Hi Oscar, 
Thank you for contacting Syncfusion support. 
We have analyzed your reported issue and provided code snippets, we suggest you to declare the JS Render template in index.html file and define the helper methods in new JavaScript file. 
And import that JS file in the (app.component.ts) file, please refer the below code snippet. 
[TS] 
import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; 
import { EJ_GANTT_COMPONENTS } from 'ej-angular2/src/ej/gantt.component'; 
import './helperfunction.js'; 
 
[JS] 
function _getTime(date) { 
    return ej.format(new Date(date), "hh:mm"); 
} 
   //Here, used the helper function to get the date and time value part from the StartTime. 
       $.views.helpers({ 
            timeDisplay: _getTime 
        }); 
 
[HTML] 
 
<body> 
    <script type="text/x-jsrender" id="tooltipTemplate"> 
        <table> 
            <tr> 
                <td style="padding:3px"><b>Start:</b></td> 
                <td style="padding:3px">{{:~timeDisplay(startDate)}}</td> 
            </tr> 
            <tr> 
                <td style="padding:3px"><b>End:</b></td> 
                <td style="padding:3px">{{:~timeDisplay(endDate)}}</td> 
            </tr> 
        </table> 
       
    </script> 
</body> 
 
We have prepared the sample for your reference, please find the sample link below. 
 
Please let us know if you require further assistance on this. 
Regards, 
Punniyamoorthi. 



OB oscar bartolome July 23, 2018 10:07 AM UTC

Ok, now it works fine!
Thanks!

PE Punniyamoorthi Elangovan Syncfusion Team July 24, 2018 02:37 PM UTC

Hi Oscar, 
Thank you for your update 
Please let us know if you require further assistance on this. 
Regards, 
Punniyamoorthi 
 
 


Loader.
Up arrow icon