How to change current date-time format in the footer of a pdf document using PuppeteerSharp

Question

I have a .Net 5 application that uses PuppeteerSharp(5.1.0) to convert Html files to pdf documents. I need to show the current date-time in the footer of the pdf document. I am using the following code to show the footer content.

Footer template:

var footerTemplate = @"<div style=""display: flex; justify-content: space-between; font-size: 8px; margin: 0px 45px 0px 45px; width: 100%"">
                                        <div class=""date""></div>
                                        <div>Page <span class=""pageNumber""></span><span> of </span><span class=""totalPages""></span></div>
                                   </div>";

PuppeteerSharp pdf generation code:

var marginOptions = new MarginOptions()
{
    Left = "60px",
    Right = "60px",
    Bottom = "80px",
    Top = "60px"
};
await puppeteer.PDF(htmlFilePath, outputPath, new PuppeteerSharp.PdfOptions
         {
             Format = PuppeteerSharp.Media.PaperFormat.A4,
             PrintBackground = true,
             Landscape = true,
             MarginOptions = marginOptions,
             DisplayHeaderFooter = true,
             HeaderTemplate = "<div></div>",
             FooterTemplate = footerTemplate"
          });

It shows the current date-time like this: faulty date-time footer

But I need to show the current date-time like that. correct date-time footer

How can I format the date-time in the footer?