Export and import of DatePickerWidgetAnnotation

Which product are you using?

PDF.js Express
PDF.js Express Version

Detailed description of issue
I’m create a annotation with:
annotField = new instance.Annotations.DatePickerWidgetAnnotation
This field works fine and shows the date selection.

I then store the annotation/field into my database via:

  var xfdf = await annotManager.exportAnnotations({
    annotList: annots,
    widgets: true,
    links: true,
    fields: true,

This is the xfdf file:

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
	<pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4">
		<ffield type="Tx" name="2b555f1a-6cd1-d501-c1e0-89a4aef99acf" flags="Required">
			<font name="Helvetica"/>
		<widget field="2b555f1a-6cd1-d501-c1e0-89a4aef99acf" modified-date="D:20220617114011-07'00'" page="1">
			<rect x1="29.453" x2="154.252" y1="734.093" y2="759.053"/>
			<border width="0" style="null">
				<color a="0"/>
			<trn-custom-data bytes="{&quot;teams&quot;:&quot;[{\&quot;id\&quot;:7}]&quot;,&quot;text&quot;:&quot;Todays Date&quot;,&quot;sort_index&quot;:&quot;1&quot;,&quot;required&quot;:&quot;true&quot;,&quot;defaultchecked&quot;:&quot;false&quot;,&quot;defaulttoday&quot;:&quot;true&quot;,&quot;groupname&quot;:&quot;&quot;,&quot;options&quot;:&quot;[]&quot;,&quot;type&quot;:&quot;Date&quot;}"/>
		<field name="2b555f1a-6cd1-d501-c1e0-89a4aef99acf">
		<freetext page="0" rect="29.453,734.093,154.252,759.053" color="#E6FAFF" flags="print" name="2b555f1a-6cd1-d501-c1e0-89a4aef99acf" title="Brooklyn Collins" subject="FreeText" date="D:20220617092925-07'00'" creationdate="D:20220617092912-07'00'" TextColor="#000000" FontSize="7.487942122186496">
			<trn-custom-data bytes="{&quot;type&quot;:&quot;Date&quot;,&quot;trn-wrapped-text-lines&quot;:&quot;[\&quot;Date \&quot;]&quot;,&quot;teams&quot;:&quot;[{\&quot;id\&quot;:7}]&quot;,&quot;required&quot;:&quot;true&quot;,&quot;text&quot;:&quot;Todays Date&quot;,&quot;groupname&quot;:&quot;&quot;,&quot;multiline&quot;:&quot;false&quot;,&quot;defaultchecked&quot;:&quot;false&quot;,&quot;defaulttoday&quot;:&quot;true&quot;,&quot;options&quot;:&quot;[]&quot;}"/>
						<span style="color:#000000">Date</span>
			<defaultappearance>0 0.8 1 rg /Helvetica 7.487942122186496 Tf</defaultappearance>
			<defaultstyle>font: Helvetica 7.487942122186496pt; text-align: center; text-vertical-align: top; color: #000000</defaultstyle>

I then import the xfdf with :

          var annotations = annotManager.getAnnotationsList();
          annotations.forEach((annotation) => {
            if (annotation.Subject === "Widget" && annotation.getCustomData("type") !== "") {
              var field = fieldManager.getField(annotation.fieldName);
              if (annotation.getCustomData("type") === "Date") {
                var widget = field.widgets[0];
                widget.getDatePicker().show(); // open date picker widget

My code fails with:
widget.getDatePicker is not a function

The imported field does not know it’s a DatePickerWidgetAnnotation.
How do I import or set this field so that its a DatePickerWidgetAnnotation widget?

Expected behavior
{Provide a screenshot or description of the expected behaviour}
I expected after import that the field would be a DatePickerWidgetAnnotation and allow me to select a date with a pulldown.

Does your issue happen with every document, or just one?
All Documents

Link to document

Code snippet
See above

Thank-you in advance for your help!

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:


Hello slavko.jovanocvic,
Instead of checking the type of annotation like this:

I would suggest doing

annotation instanceof Annotations.DatePickerWidget

As custom data can cause unexpected behaviour between viewers. You also have to pass in the field associated with the annotation, and the options when creating a date picker widget: PDFJS Express WebViewer Class: DatePickerWidgetAnnotation

Best regards,
Tyler Gordon
Web Development Support Engineer


Thank-you for your response. The issue that I’m facing is after retrieving (from the DB) the annotation with importAnnotations(annots), the widget field returned by the import is not an instanceof of a DatePickerWidget… How would I get this field to be instanceof DatePickerWidget? There is noting in the xfdf that would signify that it’s an DatePickerWidget, I believe this is why the import does not create it as such.

Hello slavko.jovanovic,

Looking at the XFDF, it seems the annotation with the “Date” contents is a FreeText, which shouldnt be the case it should be of type widget with an associated field.

How are you creating these DatePickerWidgetAnnotations?

Best regards,
Tyler Gordon
Web Development Support Engineer

The FreeText annot that you see in the XFDF is from the process used to create the Date field. I’m dropping FreeText annot on the PDF and then converting them to specific Widgets, this is what is creating the ffield, widget and fields xml int eh XFDF.

I’m create the datefield with the following.:

else if (annot.getCustomData("type") === "Date") {
          //flags.set(instance.Annotations.WidgetFlags.EDIT, false);
          const font = new instance.Annotations.Font({ name: "Helvetica" });
          field = new instance.Annotations.Forms.Field(annot.Id, {
            type: "Tx",
            //value: annot.getCustomData("defaultchecked"),
            //value: true,
          annotField = new instance.Annotations.DatePickerWidgetAnnotation(field);

The field works properly once created, but does not work once extracted and reloaded from the xfdf.

Hello slavko.jovanovic,

Can you provide the document with the broken field?

Best regards,
Tyler Gordon
Web Development Support Engineer

No I cannot, since the document does not initially have the date field. I create the date field with the API code (the field works fine). When I export it and reimport it, it does not come back as a date field. It comes back as regular text field.

Hello slavko.jovanovic,

After doing some investigation I was unable to reproduce this, here are the steps I did:

  1. Open a blank PDF file in the latest version of PDFJS Express
  2. Create a date widget using the tool under ‘Forms’
  3. Exported all the annotations on the file using await annotManager.exportAnnotations({ widgets: true, links: true, fields: true, });
  4. Inserted this code into my environment:
  instance.Core.documentViewer.addEventListener('documentLoaded', async () =>{
    const xfdf = `<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><freetext page="0" rect="204.040,606.140,456.570,692" flags="print" name="094ef77a-9234-7b9d-aed7-d80e2ea0f33f" title="Guest" subject="FreeText" date="D:20220725140728-07'00'" width="0" creationdate="D:20220725140727-07'00'" TextColor="#E44234" FontSize="12"><trn-custom-data bytes="{&quot;pdftron_freetext_date&quot;:&quot;YYYY-MM-DD&quot;,&quot;trn-wrapped-text-lines&quot;:&quot;[\\&quot;2022-07-25 \\&quot;]&quot;}"/><contents>2022-07-25</contents><contents-richtext><body><p><span>2022-07-25</span></p></body></contents-richtext><defaultappearance>0 0 0 rg /Helvetica 12 Tf</defaultappearance><defaultstyle>font: Helvetica 12pt; text-align: left; text-vertical-align: top; color: #E44234</defaultstyle></freetext></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>`
    await instance.Core.annotationManager.importAnnotations(xfdf)
  1. Reloaded the webpage to apply the changes
  2. The date widget was imported correctly.

What version of PDFJS Express are you using?
Are you modifying the XFDF at all?

Best regards,
Tyler Gordon
Web Development Support Engineer