自定义 PDF 表单日期时间选择器

在 PDF 表单中，日期域允许用户输入或选择日期和时间。为了增强用户体验并满足更复杂的需求，Foxit PDF SDK for Web 提供了自定义日期时间选择器功能。开发者可以通过 [IViewerUI] 和 [IDateTimePicker] 接口自定义日期时间选择器的外观和行为，这样可以更好地控制用户的交互体验，并确保日期选择器与应用的整体设计风格相协调。

注意： 自定义 PDF 表单日期时间选择器不依赖 UIExtension 即可实现。

实现自定义日期时间选择器

创建日期时间选择器

开发者可以通过 IViewerUI 接口的 createDateTimePicker 方法创建一个特定格式的日期时间选择器。该方法会返回一个 IDateTimePicker 实例，该实例由系统自动管理，因此开发者无需手动进行销毁。

new PDFViewer({
    viewerUI: new class extends PDFViewCtrl.viewerui.TinyViewerUI {
        createDateTimePicker(format) {
            // 创建并返回一个 IDateTimePicker 实例
            return new CustomDateTimePicker(this, format);
        }
    }
});

或者

new PDFUI({
    viewerOptions: {
        viewerUI: new class extends UIExtension.XViewerUI {
            createDateTimePicker(format) {
                // 创建并返回一个 IDateTimePicker 实例
                return new CustomDateTimePicker(this, format);
            }
        }
    }
})

实现 IDateTimePicker 接口

IDateTimePicker 是一个抽象类, 开发者需要继承该类并实现其抽象方法。以下是一个简单的实现示例：

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

    isOpen() {
        // 返回日期时间选择器是否打开
        return this.isOpen;
    }

    open(option) {
        // 打开日期时间选择器并应用选项
        this.isOpen = true;
        // 实现打开逻辑
    }

    onChange(callback) {
        // 注册值变化回调
        this.onChangeCallback = callback;
        // 返回取消注册的函数
        return () => {
            this.onChangeCallback = null;
        };
    }

    close() {
        // 关闭日期时间选择器
        this.isOpen = false;
        // 实现关闭逻辑
    }

    destroy() {
        // 销毁日期时间选择器并释放资源，销毁时机由 Foxit PDF SDK for Web 决定
        // 实现销毁逻辑
    }

    containsElement(element) {
        // 检查元素是否属于日期时间选择器。该方法用于判断用户是否在日期时间选择器上进行交互，从而决定是否需要切换表单域的焦点
        return this.element.contains(element);
    }
}

具体实现可以参考示例： </examples/PDFViewCtrl/custom-date-time-picker/index.html>