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"/>
		</ffield>
		<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"/>
			</border>
			<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;}"/>
		</widget>
	</pdf-info>
	<fields>
		<field name="2b555f1a-6cd1-d501-c1e0-89a4aef99acf">
			<value/>
		</field>
	</fields>
	<annots>
		<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;}"/>
			<contents>Date</contents>
			<contents-richtext>
				<body>
					<p>
						<span style="color:#000000">Date</span>
						<span/>
					</p>
				</body>
			</contents-richtext>
			<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>
		</freetext>
	</annots>
</xfdf>

I then import the xfdf with :

          annotManager.importAnnotations(dbAnnot.annotation);
          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
                annotation.refreshDatePicker();
              }

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
Any PDF

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:

Guides:APIs:Forums:

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
PDFTron

Tyler,

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
PDFTron

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,
            flags,
            font,
          });
          annotField = new instance.Annotations.DatePickerWidgetAnnotation(field);
          instance.annotManager.addAnnotation(annotField);

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