Date is editable while viewing the document using datepickerAnnotation

Which product are you using?

PDF.js Express Version

Detailed description of issue
{I am trying to add a date field using date picker annotation and after field is added i am able to select the date from the datepicker popup and after saving the document but eventually i am viewing the same document at another place date is visible but it is editable and font size is also reduced which i had set earlier.
i have tried using readonly and locked property but nothing works for the same.}

Expected behaviour
{Date should not be editable and font size should be same while selecting the date

image

}

Does your issue happen with every document, or just one?
{Yes}

Link to document
{Provide a link to the document in question if possible}

Code snippet
{
let date;
const flags = new Annotations.WidgetFlags();
const font = new Annotations.Font();

font.size = 20;
field = new Annotations.Forms.Field(annot.type, {
type: ‘Tx’,
flags,
font,
});

            date = new Annotations.DatePickerWidgetAnnotation(field);
            date.TextColor = new Annotations.Color(0, 0, 1, 0.5);

            annotationManager.redrawAnnotation(date);

date.PageNumber = annot.page_number;
date.X = annot.x;
date.Y = annot.y;
date.Width = annot.width;
date.Height = annot.height;

annotationManager.addAnnotation(date);
fieldManager.addField(field);
annotsToDraw.push(date);
}

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 ds081999,

I was able to set the annotation to readonly by doing:

    dateAnnotation.fieldFlags.set('ReadOnly', true)

How are you setting the readonly flag?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Hey tgordon,

I tried the same using fieldflags and also with locked property but it’ do not worked out infact, issue is that it creates a text field where the user view the pdf and also it decreases the font size to default.

Hello ds081999,

You will need to redraw the annotation if you are setting the flags after it is rendered, you can do that with annotationManager.redrawAnnotation(annotation)

Does this work for you?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Hey tgordon,

Yeah! thanks that worked i have another issue regarding datepicker tootip i am setting tooltipName: ‘date’ inside the fields. It’s saying ‘undefined’ and also the font size issue in the viewer it automatically reset to default though i have set font size in the field itself. Please refer to the below screenshot.
image

Hello ds081999,

Glad to hear that works for you!

For the popup you can use the UI’s popup APIs: PDFJS Express WebViewer Interface: Popup, here is a guide on this: Popup API with JavaScript | PDF.js Express SDK

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Also, the font size issue in the viewer it automatically reset to default though I have already set font size in the field itself by using font annotation.

Hello ds081999,

Can you provide screenshots and steps to reproduce? Thank you!

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

{
let date;
const flags = new Annotations.WidgetFlags();
const font = new Annotations.Font();

font.size = 20;
field = new Annotations.Forms.Field(annot.type, {
type: ‘Tx’,
flags,
font,
});
date = new Annotations.DatePickerWidgetAnnotation(field);
date.TextColor = new Annotations.Color(0, 0, 1, 0.5);

        annotationManager.redrawAnnotation(date);

date.PageNumber = annot.page_number;
date.X = annot.x;
date.Y = annot.y;
date.Width = annot.width;
date.Height = annot.height;

annotationManager.addAnnotation(date);
fieldManager.addField(field);
annotsToDraw.push(date);

i am able to set font size 20 while picking the date, but while viewing the pdf after saving font size decreases.
font size is set to 20 which i am setting on the right side and on left side while viewing pdf font size decreases…

Thanks

Hello ds081999,

What does it say the font size is after save?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

Hi tgordon,

After inspecting from elements, it is 12 which is default.
I guess it’s not getting saved after rendering.

Hello ds081999,

When you initialize the Font, you can pass in a font size like so:

    const font = new Annotations.Font({size: 20});

Does this work for you?
Also how are you saving the document?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron