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