# Date is editable while viewing the document using datepickerAnnotation

**URL:** <https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [August 3, 2022, 9:56am UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916 "2022-08-03T09:56:24Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![ds081999](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@ds081999](https://pdfjs.community/u/ds081999)\
**Post date:** [August 3, 2022, 9:56am UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/1 "2022-08-03T09:56:24Z")

</div>

**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](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/5df4ea28ce92925bd4cd975e545071413245e78d.png)

}

**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);  
}

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [August 3, 2022, 9:56am UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/3 "2022-08-03T09:56:30Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Create fillable forms - Modify fields to readonly](https://pdfjs.express/documentation/forms/fill-form-fields.8#modify-fields-to-readonly)
- [Real-time collaboration client](https://pdfjs.express/documentation/collaboration/realtime-collaboration-client.8)
- [Add annotation events - annotationChanged (add/modify/delete)](https://pdfjs.express/documentation/annotation/annotation-events.8#annotationchanged-(add/modify/delete))

APIs:
- [Core.Annotations.DatePickerWidgetAnnotation - new DatePickerWidgetAnnotation(field, options)](https://pdfjs.express/api/Core.Annotations.DatePickerWidgetAnnotation.html#DatePickerWidgetAnnotation__anchor)
- [Core.Annotations.TextSquigglyAnnotation - new TextSquigglyAnnotation( [initializer])](https://pdfjs.express/api/Core.Annotations.TextSquigglyAnnotation.html#TextSquigglyAnnotation__anchor)
- [Core - onDateSelected(date)](https://pdfjs.express/api/Core.html#.onDateSelected__anchor)

Forums:
- [Replace the comments pane](https://pdfjs.community/t/replace-the-comments-pane/852/1)
- [Export and import of DatePickerWidgetAnnotation](https://pdfjs.community/t/export-and-import-of-datepickerwidgetannotation/1782/1)
- [How to upload a PDF file to a web page, get the PDF fields values and render them into the same web page fields using JavaScript](https://pdfjs.community/t/how-to-upload-a-pdf-file-to-a-web-page-get-the-pdf-fields-values-and-render-them-into-the-same-web-page-fields-using-javascript/1484/1)

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [August 3, 2022, 8:57pm UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/4 "2022-08-03T20:57:31Z")

</div>

Hello ds081999,

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

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

```

How are you setting the readonly flag?

Best regards,  
Tyler Gordon  
Web Development Support Engineer  
PDFTron

---

<div class="post-metadata">

**Author:** ![ds081999](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@ds081999](https://pdfjs.community/u/ds081999)\
**Post date:** [August 4, 2022, 8:15am UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/5 "2022-08-04T08:15:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [August 4, 2022, 5:25pm UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/6 "2022-08-04T17:25:59Z")

</div>

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)](https://www.pdftron.com/api/web/Core.AnnotationManager.html#redrawAnnotation)

Does this work for you?

Best regards,  
Tyler Gordon  
Web Development Support Engineer  
PDFTron

---

<div class="post-metadata">

**Author:** ![ds081999](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@ds081999](https://pdfjs.community/u/ds081999)\
**Post date:** [August 8, 2022, 9:36am UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/7 "2022-08-08T09:36:04Z")

</div>

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](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/4293a39773f4f385f8d89fc1b1060d218d89370e.png)

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [August 8, 2022, 5:48pm UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/8 "2022-08-08T17:48:26Z")

</div>

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](https://pdfjs.express/api/UI.Popup.html), here is a guide on this: [Popup API with JavaScript | PDF.js Express SDK](https://pdfjs.express/documentation/ui-customization/customizing-popup.8#adding-items)

Best regards,  
Tyler Gordon  
Web Development Support Engineer  
PDFTron

---

<div class="post-metadata">

**Author:** ![ds081999](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@ds081999](https://pdfjs.community/u/ds081999)\
**Post date:** [August 9, 2022, 5:36am UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/9 "2022-08-09T05:36:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [August 9, 2022, 5:14pm UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/10 "2022-08-09T17:14:00Z")

</div>

Hello ds081999,

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

Best regards,  
Tyler Gordon  
Web Development Support Engineer  
PDFTron

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [August 9, 2022, 6:28pm UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/12 "2022-08-09T18:28:36Z")

</div>

Hello ds081999,

What does it say the font size is after save?

Best regards,  
Tyler Gordon  
Web Development Support Engineer  
PDFTron

---

<div class="post-metadata">

**Author:** ![ds081999](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@ds081999](https://pdfjs.community/u/ds081999)\
**Post date:** [August 10, 2022, 6:51am UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/13 "2022-08-10T06:51:28Z")

</div>

Hi tgordon,

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

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [August 10, 2022, 6:19pm UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/14 "2022-08-10T18:19:35Z")

</div>

Hello ds081999,

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

```javascript
    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

---

<div class="post-metadata">

**Author:** ![ds081999](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@ds081999](https://pdfjs.community/u/ds081999)\
**Post date:** [August 10, 2022, 8:41pm UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/15 "2022-08-10T20:41:04Z")

</div>

Hello tgordon,

Nope! this does not work.

I am saving it in the form of file ‘base64’ basically, but before doing that converting it into filedata and merging annotations using setXFDF() and setFile() and merge() then saving it in base64 form. Hope it helps.

Thanks

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [August 15, 2022, 7:06pm UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/16 "2022-08-15T19:06:27Z")

</div>

Hello ds081999,

To confirm, youre using the REST API to do `set xfdf` and `merge xfdf`?  
Merge XFDF: [Merging XFDF using the Express REST API | Documentation](https://pdfjs.express/documentation/utils/merge)  
Set XFDF: [Set XFDF using the Express REST API | Documentation](https://pdfjs.express/documentation/utils/set)

If you could provide the code you’re using to merge and set XFDF that would help with reproducing the issue.

Best regards,  
Tyler Gordon  
Web Development Support Engineer  
PDFTron

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [August 17, 2022, 4:40pm UTC](https://pdfjs.community/t/date-is-editable-while-viewing-the-document-using-datepickerannotation/1916/18 "2022-08-17T16:40:17Z")

</div>

Hello ds081999,

Thank you for providing the code, I wasnt able to reproduce the issue but can you try using the REST API through HTTP requests? The functionality should be similar, but it may be a bug with the Utility SDK.

> **[Merging XFDF using the Express REST API | Documentation](https://pdfjs.express/documentation/utils/merge)**

Best regards,  
Tyler Gordon  
Web Development Support Engineer  
PDFTron

Share how you are using PDF.js Express in your organization you could win a **$500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free**. Learn more [here](https://utm.guru/ueQNw)