Create date picker using PDFNet

Technical Support Apryse SDK
,
1

Product: PDFNet

Product Version: 8.10.0

Hello! Is there any way to insert a date picker programmatically by using the PDFNet class? I know how to insert text boxes, check boxes and signature widgets but I haven’t figured out a way to insert a date picker like the ones you can insert via the web viewer user interface. Unable to find anything helpful yet browsing the PDFNet api docs.

Thank you!

2

Hi @ccohoon,

To create a DatePickerWidget programatically you can use the following code:

      // set flags for multiline and required
      const flags = new Annotations.WidgetFlags();
      flags.set('Required', true);

  
      // create a form field, note that it has to be a Text field
      const field = new Annotations.Forms.Field("my_field_name", {
        type: 'Tx',
        flags,
      });
  
      // create a DatePicker widget and associate it with the field we just created
      const widgetAnnot = new Annotations.DatePickerWidgetAnnotation(field);
  
      // set position and size
      widgetAnnot.PageNumber = 1;
      widgetAnnot.X = 100;
      widgetAnnot.Y = 100;
      widgetAnnot.Width = 50;
      widgetAnnot.Height = 20;
  
      //add the form field and widget annotation
      annotationManager.getFieldManager().addField(field);
      annotationManager.addAnnotation(widgetAnnot);
      annotationManager.drawAnnotationsFromList([widgetAnnot]);

The following documentation will show you the APIs available to customize date formats etc:
https://www.pdftron.com/api/web/Core.Annotations.DatePickerWidgetAnnotation.html#main

Let me know if that works out for you.

Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.

3

Hi Armando! Thank you for the reply. I was actually wanting to create a date picker widget utilizing the full API. Like how I currently create signature widgets using:

const annot = await PDFNet.SignatureWidget.create(doc, rect);

So is there a way to create a date picker widget using the lower level API?

4

Hey Caleb,

Thanks for clarifying. I found this post that shows that to create a date picker using one of our back-end SDKs we simply use a TextWidget with some embedded JavaScript actions. I think this would be the same if you are using PDFNet to create a DatePicker in WebViewer with the fullAPI.

With the “lean” API in WebViewer we provide this nice abstraction of a DatePicker that gives you the actions already built in, but the actual field is just a text field (and internally the DatePicker is just extending the TextWidget).

I’d follow the code sample from that post using the matching PDFNet APIs and it should work.

Let me know if that helps.

Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.

5

Hi Armando, thank you for the solution. Works great! Here’s a snippet from my implementation based off of the provided post:

...
const jsAction = await PDFNet.Action.createJavaScript(doc, "AFDate_FormatEx(\"d/m/yy\");");
const annot = await PDFNet.TextWidget.create(doc, rect);
const sdfObj = await annot.getSDFObj();
const dict = await sdfObj.putDict('AA');

await dict.put("K", await jsAction.getSDFObj());
await dict.put("F", await jsAction.getSDFObj());

return annot;
...
1 Like