Display Date & Time on PDF sheet

Forms SharePoint 2019
1

Hi,

I want to put a Date and Time stamp to appear on the form (top header/footer) when users export the form as PDF.

Could you please provide me with the correct CSS/HTML?

Thank you!

2

Hello @DryChips,

You can add a date and time stamp to the header or footer using the same approach as for page numbering described here.

You just need to update the code a bit, declare a variable with the current date and time like this:

<script type="x/kendo-template" id="page-template">
            #
                var theDate = new Date().toDateString() + ' ' + new Date().toLocaleTimeString();

            #
            <div class="page-template">
                <div class="header">
                <div style="float: right">#=theDate#</div>
            </div>
            </div>
</script>
3

Awesome, thank you!

I have tried using the code you provided in the HTML control but it doesn't seem to have worked.

I used this code alongside this JS code:

fd.pdfOptions = {
    landscape: true,
    template: $("#page-template").html()
};

I have also placed this CSS code in as well:

.page-template .header {
    top: 20px;
    border-bottom: 1px solid #000;
}

Here is an image of my form:
I would like to place the date and time in the top left of the page

image
image1246×875 66.5 KB

4

@DryChips,

What code you've pasted to the HTML control? Please share it.

5

Here is my code:
I modified it to reduce any unnecessary clutter

<script id="datetime">
    #
    var theDate = new Date().toDateString() + ' ' + new Date().tolocaleTimeString();
    #
    <div class ="datetime">
    <div class ="header">
    <div style = "float:left">#theDate#</div>
    </div>
    </div>
    </script>
6

@DryChips,

You need to define the paper size and margins, please add this code to the JS editor:

fd.pdfOptions = {
    paperSize: 'A4',
    margin: '10 mm',
    landscape: true,
    template: $("#page-template").html()
};
7

Hiya,

Nothing seems to have happened, unfortunately. I changed my code back to the one you provided initially:

<script type="x/kendo-template" id="page-template">
            #
                var theDate = new Date().toDateString() + ' ' + new Date().toLocaleTimeString();
            #
            <div class="page-template">
                <div class="header">
                <div style="float: left">#=theDate#</div>
            </div>
            </div>
</script>

I put this code in the JS Editor:

fd.pdfOptions = {
    paperSize: 'A4',
    margin: '10 mm',
    landscape: true,
    template: $("#page-template").html()
};

Nothing appears at all on the export. One of the properties in the fd.pdfOptions code has messed up my PDF document view on export. it looks like this:

image
image199×605 8.48 KB

Compared to before, where everything was on one sheet:

image

8

@DryChips,

You need to define the paper size and margins to display the date in a header.

You can define any paper size and orientation, please find more information here.

Do you have any custom CSS for a PDF file? Comment it out and test the export.
Or try adding a date to the header on a blank form.