How to listen for onSelect event from DatePickerWidget

Technical Support
1

Hi team,

I am struggling to work with the DatePickerWidgetAnnotation, and especially its UI instance of the DatePicker calendar since I can’t find any documentation about it. Would it be possible to beef this section of the documentation out please?

More importantly, I want to be able to trigger a function after the user selects a date from the date picker. Could you please provide some guidance on how to do this?

Cheers,
Luke.

1 Like
2

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:

1 Like
3

Hey there,

This is a relatively new feature, but yeah I agree our documentation is not the greatest here. You can reference the PDFTron Documentation for this as it is the exact same API. We will update the Express guides when time permits.

You can listen to the date picker widget by creating and listening to a field.

    const flags = new WidgetFlags();

    const id = 'datepicker1'

    const field = new Annotations.Forms.Field(id, {
      type: 'Tx',
      flags,
    });

    field.on('change', () => {
      const value = field.getValue();
      console.log(value)
    })

    const widgetAnnot = new Annotations.DatePickerWidgetAnnotation(field);

    // set position and size
    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 100;
    widgetAnnot.Height = 30;

    annotManager.addAnnotation(widgetAnnot);
    annotManager.drawAnnotationsFromList([widgetAnnot]);
    annotManager.getFieldManager().addField(field);

I hope this helps!

Thanks,
Logan

4

Hi Logan,

That’s almost what I’m after, however listening to the ‘change’ event will also be triggered if the user types in a date. I am specifically wanting to listen to the event when the user clicks a date using the calendar widget. Is this at all possible?

Cheers, Luke.

5

Hey Luke,

Right now I do not think we have a way to do that. Can I ask what your use case is?

6

Hi Logan,

I understand its a bit of a unique use case, but basically we want to jump to the next form field automatically when the date is selected via the calendar. This would be quite jarring if it was bound to the change event since this would be triggered by just typing.

Luke.

7

Hey @fuse (sorry for the delay, it was a long weekend in Canada)

I’m having a hard time finding a way to make this work. We do have a few APIs that might help accomplish this use case but it seems like they might not be working the way I expect. I’m going to talk to the dev who implemented this and see what they suggest - i’ll get back to you soon.

Thanks!
Logan

8

Hi @fuse

I’ve looked into this a bit more and unfortunately I don’t think this is going to be possible with our current APIs.

We are using pikaday under the hood, and we do have an API to get the pikaday instance, however their API does not allow you to bind events after its been instantiated.

They do provide you a way to set a onSelect callback when instantiated, but we use this callback internally and it cannot be easily overridden.

I’ll leave you with the code I have had before I gave up and maybe you can find a way to make it work.

    const id = 'datepicker1'
    const flags = new Annotations.WidgetFlags();
  
    const field = new Annotations.Forms.Field(id, {
      type: 'Tx',
      flags,
    });
  
    field.on('change', () => {
      const value = field.getValue();

    })
  
    const widgetAnnot = new Annotations.DatePickerWidgetAnnotation(field);

    widgetAnnot.datePickerOptions = {
      onSelect: () => {
        console.log('test')
      }
    }
  
    // set position and size
    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 100;
    widgetAnnot.Height = 30;
  

  
    await annotManager.addAnnotation(widgetAnnot);
    await annotManager.drawAnnotationsFromList([widgetAnnot]);
    const f = annotManager.getFieldManager().addField(field);

    setTimeout(() => {
      const picker = f.widgets[0].getDatePicker();

      console.log(picker)
    }, 100)

picker is the instance of pikaday. I do see that it has a _onChange property, but when I tried to overwrite it but I could not get it to trigger for some reason.

Another thing you could potentially try is using the field.change event I mentioned the first response, but also track the last event happened (keyboard vs mouse) - if the last event was a mouse event you know they clicked the calendar and didn’t type out a date.

Let me know if you find a workaround! In the meantime I’ll work with the team to improve this API in the future.

Thanks,
Logan

9

Hi Logan,

Thanks for looking into this for me. I’ll have another play around and let you know how I go.

Cheers, Luke.