# # 自定义 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/UIExtension/custom-date-time-picker/index.html>