How to change the date format on the task tooltip

[Adam Moroff]

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

[Gurunathan A]

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. 

Sample - https://codesandbox.io/s/vue-template-icbkz 

Documentation – https://ej2.syncfusion.com/vue/documentation/gantt/tooltip/?no-cache=1#tooltip-template 

 

Please let us know, if you require further assistance on this. 

 

Thanks, 

Gurunathan  

[Adam Moroff]

Thank you sir. Much appreciated. 

[Gurunathan A]

Hi Adam, 

  

We are happy to assist you.  

Regards, 

Gurunathan