Section:

Create Date Picker Fields

For form fields that expect a date to be input, WebViewer provides an interactive date picker widget to select a date from a calendar. Users can still type the date, but the date field can also be populated by using the calendar.

The calendar will automatically set the correct date format for the field so the user doesn't need to worry about entering the date in a specific format.

Apryse Docs Image

Date picker fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:

Date picker widget flags

Widget flag

Description

Unique to date picker?

READ_ONLY

The field value cannot be changed.

No

REQUIRED

The field must have a value when exported.

No

Date picker sample code

1WebViewer(...)
2.then(instance => {
3  const { annotationManager, Annotations, documentViewer } = instance.Core;
4  const { WidgetFlags } = Annotations;
5
6  documentViewer.addEventListener('documentLoaded', () => {
7    // Sets flags for the date picker widget.
8    const flags = new WidgetFlags();
9    flags.set(WidgetFlags.REQUIRED, true);
10
11    // Specify a font-family and font size.
12    const font = new Annotations.Font({ name: 'Helvetica', size: 12 });
13
14    // Creates a date picker form field.
15    const field = new Annotations.Forms.Field('DatePickerField 1', {
16      flags,
17      font,
18      type: 'Tx', // Date pickers are considered 'text' fields.
19    });
20
21    // Creates a date picker widget annotation.
22    const widgetAnnot = new Annotations.DatePickerWidgetAnnotation(field);
23    widgetAnnot.PageNumber = 1;
24    widgetAnnot.X = 25;
25    widgetAnnot.Y = 25;
26    widgetAnnot.Width = 100;
27    widgetAnnot.Height = 25;
28
29    // Add form field to field manager and widget annotation to annotation manager.
30    annotationManager.getFieldManager().addField(field);
31    annotationManager.addAnnotation(widgetAnnot);
32    annotationManager.drawAnnotationsFromList([widgetAnnot]);
33  });
34});

Related Links

Filling date field programmatically

Just like other PDF form fields, the date field can also be filled programmatically using the fieldManager or using the Annotations.DatePickerWidgetAnnotation instance.

Here is an example of filling date field programmatically:

JavaScript (SDK v8.0+)

1WebViewer(...)
2  .then(instance => {
3    const { annotationManager, documentViewer } = instance.Core;
4    documentViewer.addEventListener('annotationsLoaded', () => {
5      // replace with id of date field in your document
6      const dateFieldId = 'DatePicker_1';
7      const field = annotationManager.getFieldManager().getField(dateFieldId);
8      field.setValue('6/15/20');
9      const widget = field.widgets[0];
10      widget.getDatePicker().show(); // open date picker widget
11      widget.getDatePicker().setDate('6/17/20');
12      field.setValue('6/7/20');
13      widget.refreshDatePicker(); // refresh widget
14    });
15    // ...
16});

Related Links

Date picker internationalization

The default i18n configuration format looks like this:

JavaScript (SDK v8.0+)

1WebViewer(...)
2  .then(instance => {
3    const { Annotations } = instance.Core;
4    const { DatePickerWidgetAnnotation } = Annotations;
5    DatePickerWidgetAnnotation.datePickerOptions.i18n = {
6      previousMonth : 'Previous Month',
7      nextMonth     : 'Next Month',
8      months        : ['January','February','March','April','May','June','July',
9        'August','September','October','November','December'],
10      weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday',
11        'Saturday'],
12      weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
13    }
14    DatePickerWidgetAnnotation.datePickerOptions.firstDay = 0;
15    DatePickerWidgetAnnotation.datePickerOptions.isRTL = false;
16   // ...
17});

You must provide 12 months and 7 weekdays (with abbreviations). Always specify weekdays in this order with Sunday first. You can change the firstDay option to reorder if necessary (0: Sunday, 1: Monday, etc). You can also set isRTL to true for languages that are read from right-to-left.

Learn More

Annotations and fields should be added to the document only after the document has finished loading. See Create New Form Fields Overview for more.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales