DatePicker not rendering in PDF

I have created DatePicker using the below script

    applyFields: async function () {
      const { Annotations, docViewer } = this.instance;
      const annotManager = docViewer.getAnnotationManager();
      const fieldManager = annotManager.getFieldManager();
      const annotationsList = annotManager.getAnnotationsList();
      const annotsToDelete = [];
      const annotsToDraw = [];

      await Promise.all(
        annotationsList.map(async (annot, index) => {
          let inputAnnot;
          let field;
          if (typeof annot.custom !== "undefined") {
            // create a form field based on the type of annotation
            if (annot.custom.type === "TEXT") {
              field = new Annotations.Forms.Field(
                annot.getContents() + Date.now() + index,
                {
                  type: "Tx",
                  value: annot.custom.value,
                }
              );
              inputAnnot = new Annotations.TextWidgetAnnotation(field);
            } else if (annot.custom.type === "SIGNATURE") {
              field = new Annotations.Forms.Field(
                annot.getContents() + Date.now() + index,
                {
                  type: "Sig",
                }
              );
              inputAnnot = new Annotations.SignatureWidgetAnnotation(field, {
                appearance: "_DEFAULT",
                appearances: {
                  _DEFAULT: {
                    Normal: {
                      data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC",
                      offset: {
                        x: 100,
                        y: 100,
                      },
                    },
                  },
                },
              });
            } else if (annot.custom.type === "DATE") {
              const flags = new Annotations.WidgetFlags();
              field = new Annotations.Forms.Field(
                'DatePicker',
                {
                  type: "Tx",
                  value: "m-d-yyyy",
                  // Actions need to be added for DatePickerWidgetAnnotation to recognize this field.
                  actions: {
                    F: [
                      {
                        name: "JavaScript",
                        // You can customize the date format here between the two double-quotation marks
                        // or leave this blank to use the default format
                        javascript: 'AFDate_FormatEx("mmm d, yyyy");',
                      },
                    ],
                    K: [
                      {
                        name: "JavaScript",
                        // You can customize the date format here between the two double-quotation marks
                        // or leave this blank to use the default format
                        javascript: 'AFDate_FormatEx("mmm d, yyyy");',
                      },
                    ],
                  },
                }
              );

              inputAnnot = new Annotations.DatePickerWidgetAnnotation(field);
            } else {
              // exit early for other annotations
              annotManager.deleteAnnotation(annot, false, true); // prevent duplicates when importing xfdf
              return;
            }
          } else {
            // exit early for other annotations
            return;
          }

          // set position
          inputAnnot.PageNumber = annot.getPageNumber();
          inputAnnot.X = annot.getX();
          inputAnnot.Y = annot.getY();
          inputAnnot.rotation = annot.Rotation;
          if (annot.Rotation === 0 || annot.Rotation === 180) {
            inputAnnot.Width = annot.getWidth();
            inputAnnot.Height = annot.getHeight();
          } else {
            inputAnnot.Width = annot.getHeight();
            inputAnnot.Height = annot.getWidth();
          }

          // delete original annotation
          annotsToDelete.push(annot);

          // customize styles of the form field
          Annotations.WidgetAnnotation.getCustomStyles = function (widget) {
            if (widget instanceof Annotations.SignatureWidgetAnnotation) {
              return {
                border: "1px solid #a5c7ff",
              };
            }
          };
          Annotations.WidgetAnnotation.getCustomStyles(inputAnnot);

          // draw the annotation the viewer
          annotManager.addAnnotation(inputAnnot);
          fieldManager.addField(field);
          annotsToDraw.push(inputAnnot);
        })
      );

      // delete old annotations
      annotManager.deleteAnnotations(annotsToDelete, null, true);

      // refresh viewer
      await annotManager.drawAnnotationsFromList(annotsToDraw);
      await this.uploadForSigning();
    },

But while rendering the fields while signing document it’s displaying as text field not as datepicker

Hey there,

I cannot reproduce. I have the exact same code as you and clicking on the text opens the date picker as expected. When you click on the text, does the date picker not show up?

Thanks,
Logan

Thanks for your valuable time. No, when I click on the text it behave as textbox

@Logan When I use “@pdftron/webviewer”: “^8.0.0” date picker is working but not with "@pdftron/pdfjs-express: “^8.0.0”. Please let me know how to fix it.

Hi there!

Sorry for the delay, I was away the last couple days.

I cannot reproduce this issue in version 8.0.1. Clicking the text box opens a date picker as expected.

image

Here is my code:

  instance.docViewer.on('documentLoaded', async () => {

    const { Annotations, annotManager } = instance;

    const flags = new Annotations.WidgetFlags();
    let field = new Annotations.Forms.Field(
      'DatePicker',
      {
        type: "Tx",
        value: "m-d-yyyy",
        // Actions need to be added for DatePickerWidgetAnnotation to recognize this field.
        actions: {
          F: [
            {
              name: "JavaScript",
              // You can customize the date format here between the two double-quotation marks
              // or leave this blank to use the default format
              javascript: 'AFDate_FormatEx("mmm d, yyyy");',
            },
          ],
          K: [
            {
              name: "JavaScript",
              // You can customize the date format here between the two double-quotation marks
              // or leave this blank to use the default format
              javascript: 'AFDate_FormatEx("mmm d, yyyy");',
            },
          ],
        },
      }
    );

    let inputAnnot = new Annotations.DatePickerWidgetAnnotation(field);

    inputAnnot.PageNumber = 1;
    inputAnnot.X = 10;
    inputAnnot.Y = 10;
    inputAnnot.Width = 100;
    inputAnnot.Height = 50;
    annotManager.addAnnotation(inputAnnot);
    await annotManager.drawAnnotationsFromList([inputAnnot]);
    annotManager.getFieldManager().addField(field);
  })

Do you see any errors or anything?

Logan

@Logan No issue. I don’t see any errors. When I use the above script on documentLoaded it works but in my case date picker is not working when I open the file in web viewer after merging XFD string into the file using ExpressUtils

Oh okay, the “is not working when I open the file in web viewer after merging XFD string into the file using ExpressUtils” part would have been important to know earlier.

Ill test this out and get back to you.

Logan

Hey there,

I still cannot reproduce this issue even after running the document through the merge API. We recently pushed some changes to this API that may have indirectly resolved this issue - can you try again and let me know if it works?

If not, i’m not exactly sure what is going on because I cannot reproduce no matter what I do. Can you share the code you are using the merge the XFDF?

Logan