How to display UTC date in range selector Tooltip

[Julien Regnery]

Hello,

I want to display, in the tooltip of the range selector, the date in UTC.


My code : 

    tooltip: RangeTooltipSettingsModel = {

        enable: true,

        displayMode: 'Always',

        opacity: 0.6,

        format: 'yyyy/MM/dd, HH:mm:ss',

    };

Date example:  ['2022-01-28T12:00:00.000Z', '2022-01-28T14:30:00.000Z']

Any idea ? Thanks !

[Swetha Babu]

Hi Julien,

Greetings from Syncfusion.

We can render the tooltip based on your requirement by setting the format property in tooltip as "yyyy/MM/dd HH:mm:ss". We have created a simple angular application to demonstrate the same. Please find the stackblitz link for your sample reference.

Sample link: https://stackblitz.com/edit/angular-4wxj1z?file=app.component.ts

Code Snippet:

<ejs-rangenavigator [tooltip]='tooltip'>

</ejs-rangenavigator>

 

public tooltip: Object = { enable: true, format: 'yyyy/MM/dd HH:mm:ss' , displayMode: 'Always' };

 

Screenshot:

Kindly, revert us if you have any concerns.

Regards,

Swetha

[Sébastien Sivignon]

Hello Swetha,

thanks for your answer.

My problem is not to display the date in the tooltip, but to display it in UTC

Regards
Julien

[Swetha Babu]

Hi Julien,

We are facing an issue in tooltip when trying to achieve your requirement. However, we have considered this as a bug and logged a defect report for the same. The fix for the reported scenario will be included in our upcoming weekly patch release which is expected to be rolled out on 31^st May 2022. Please find the below feedback link to keep track of the reported scenario.

Feedback link: https://www.syncfusion.com/feedback/34950/tooltip-is-not-positioned-properly-in-range-navigator

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Regards,

Swetha

[Swetha Babu]

Hi Julien,

Thank you for your patience.

We can achieve your requirement by using the text argument in tooltipRender event of the Range Navigator. We have created a simple angular application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/angular-4wxj1z-sg7r1k?file=app.component.ts

Code Snippet:

<ejs-rangenavigator id='defaultRn' (tooltipRender)="tooltipRender($event)">

</ejs-rangenavigator>

 

public tooltipRender(args: IRangeTooltipRenderEventArgs) {

    args.text[0] = new Date(args.text[0]).toUTCString();

  }

Screenshot:

Kindly, revert us if you have any concerns.

Regards,

Swetha