Foxit Developer

Customize the PDF form date-time picker ​

In PDF forms, date fields let users enter or select dates and times. To improve usability and support advanced requirements, Foxit PDF SDK for Web provides customization through IViewerUI and IDateTimePicker so you can control appearance and behavior and align the picker with your application design.

NOTE

Customizing the PDF form date-time picker does not require UIExtension.

Implement a custom date-time picker ​

Create the date-time picker ​

Use the createDateTimePicker method on IViewerUI to create a picker for a given format. It returns an IDateTimePicker instance managed by the SDK; you do not destroy it manually.

javascript
new PDFViewer({
    viewerUI: new class extends PDFViewCtrl.viewerui.TinyViewerUI {
        createDateTimePicker(format) {
            // Create and return an IDateTimePicker instance
            return new CustomDateTimePicker(this, format);
        }
    }
});

Or:

javascript
new PDFUI({
    viewerOptions: {
        viewerUI: new class extends UIExtension.XViewerUI {
            createDateTimePicker(format) {
                // Create and return an IDateTimePicker instance
                return new CustomDateTimePicker(this, format);
            }
        }
    }
})

Implement the IDateTimePicker interface ​

IDateTimePicker is an abstract class; extend it and implement the required methods. Example:

javascript
class CustomDateTimePicker extends IDateTimePicker {
    constructor(pdfViewer, format) {
        super(pdfViewer, format);
        this.isOpen = false;
    }

    isOpen() {
        // Return whether the date-time picker is open
        return this.isOpen;
    }

    open(option) {
        // Open the picker and apply options
        this.isOpen = true;
        // Implement open logic
    }

    onChange(callback) {
        // Register value change callback
        this.onChangeCallback = callback;
        // Return unregister function
        return () => {
            this.onChangeCallback = null;
        };
    }

    close() {
        // Close the date-time picker
        this.isOpen = false;
        // Implement close logic
    }

    destroy() {
        // Destroy the picker and release resources; timing is determined by Foxit PDF SDK for Web
        // Implement destroy logic
    }

    containsElement(element) {
        // Check whether an element belongs to the picker.
        // Used to decide whether focus should leave the form field when the user interacts with the picker
        return this.element.contains(element);
    }
}

See the sample at /examples/PDFViewCtrl/custom-date-time-picker/index.html in the package.