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. Image for the cookie policy date
close icon

How to change the date format on the task tooltip

Hello
I have configured my gantt chart with the following date format:  dd/mm/yyyy.  However when I hover over a task the tooltip specifies the date as mm/dd/yyyy.  

How can I configure the date format in the tooltip?

See the attached screenshot for reference.

Thank you.,
Adam

Attachment: gantt_d367140f.zip

3 Replies

GA Gurunathan A Syncfusion Team September 16, 2019 06:07 AM UTC

Hi Adam, 
 
Good day to you.  
 
We can customize the Gantt default tooltip by using the property tooltipSettings.taskbar. We have prepared a sample with custom tooltip, please find the code snippets for this below. 
 
[template.vue] 
<template> 
<div id="tooltip"> 
    <table> 
      <tbody> 
        //... 
        <tr> 
          <td>Start Date</td> 
          <td>:</td> 
          <td>{{format(data.StartDate)}}</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
</template> 
<script> 
import { Internationalization } from "@syncfusion/ej2-base"; 
let instance = new Internationalization(); 
export default { 
  data() { 
    return { 
      data: {} 
    }; 
  }, 
  methods: { 
    format: function(value) { 
      return instance.formatDate(value, { format: "MM/dd/yyyy" }); 
    } 
  } 
}; 
</script> [App.vue] 
<template> 
       <ejs-gantt ref='gantt' id="GanttContainer" : dataSource="data" :tooltipSettings="tooltipSettings"> 
                    //... 
        </ejs-gantt> 
</template > 
import template from "./template.vue"; 
//... 
  export default { 
                data: function () { 
                    return { 
                        //... 
                        tooltipSettings: { 
                            taskbar: function () { 
                                return { template: template } 
                            } 
                        }, 
                    } 
                }, 
            }; 
 
Please find the below sample and documentation link. 
 
Please let us know, if you require further assistance on this. 
 
Thanks, 
Gurunathan  



AM Adam Moroff September 16, 2019 10:53 AM UTC

Thank you sir. Much appreciated. 


GA Gurunathan A Syncfusion Team September 16, 2019 11:09 AM UTC

Hi Adam, 
  
We are happy to assist you.  

Regards, 
Gurunathan 


Loader.
Live Chat Icon For mobile
Up arrow icon