Customize Date-Time Picker for PDF Forms

In PDF forms, the date widget allows users to input or select dates and times. To enhance user experience and meet more complex requirements, Foxit PDF SDK for Web provides a customizable date-time picker feature. Developers can use the [IViewerUI] and [IDateTimePicker] interfaces to customize the appearance and behavior of the date-time picker, providing better control over user interactions and ensuring the picker aligns seamlessly with the overall design style of the application.

Note: Customizing the date-time picker for PDF forms can be implemented without relying on UIExtension.

Implement a Custom Date-Time Picker

Create a Date-Time Picker

Developers can create a date-time picker with a specific format using the createDateTimePicker method provided by the IViewerUI interface. This method returns an IDateTimePicker instance, which is automatically managed by the system, eliminating the need for developers to manually destroy it.

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

or

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, and developers need to inherit from it and implement its abstract methods. Below is a simple implementation example:

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 date-time picker and apply options
        this.isOpen = true;
        // Implement the opening logic
    }

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

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

    destroy() {
        // Destroy the date-time picker and release resources, with the timing determined by the Foxit PDF SDK for Web
        // Implement the destruction logic
    }

    containsElement(element) {
        // Check if the element belongs to the date-time picker. This method is used to determine whether the user is interacting with the date-time picker, so as to decide whether to switch the focus of the form widget.
        return this.element.contains(element);
    }
}

The specific implementation can be referenced from the example: </examples/PDFViewCtrl/custom-date-time-picker/index.html>.