/**
 * 创建或转换日期选择框
 * @param min 最小可选日期
 * @param max 最大可选日期
 * @param element 转换该元素为日期选择框
 * @returns 返回创建或转换的日期选择框
 */
export function createDateInput(min?: string, max?: string, element?: HTMLInputElement): HTMLInputElement;

/**
 * 格式化日期字符串
 * @param date 要格式化的日期值<br/><br/>
 * 支持以下几种数据类型<br/><br/>
 * `"2024-01-26"`<br/>
 * `"1/26/2024"`<br/>
 * `"638418240000000000"`<br/>
 * `new Date('2024-01-26')`<br/>
 * @returns 格式化为 M/d/yyyy 的日期字符串
 */
export function formatDate(date: Date | number | string): string;

/**
 * 设置显示日期
 * @param element 要设置显示日期的元素
 * @param val 日期值，支持格式参见 {@linkcode formatDate}
 */
export function setDateValue(element: HTMLElement, val: Date | number | string): void;

/**
 * 从日期选择框获取日期值
 * @param element 要获取的日期选择框
 * @param formatter 自定义格式化函数，传入参数为 `Date` 类型
 * @returns 默认返回日期 `ticks` 的字符串
 */
export function getDateValue(element: HTMLInputElement, formatter?: (date: Date) => string): string;

/** 日期选择框类 */
export class DateSelector {
    /**
     * 把父容器下所有匹配 `input[data-type="date"]` 的元素修改为统一的日期选择框<br/><br/>
     * 解析的属性为 `id`, `class`, `data-min`, `data-max`, `disabled`
     * @param dom 父元素
     * @param trigger 日期设置事件触发函数（上下文为触发设置日期的 `DateSelector` 实例）
     * @example
     * HTML:
     *  ```html
     *  <input id="dateFrom" data-type="date" data-min="1980-01-01"/>
     *  ```
     * js:
     *  ```js
     *  const libUI = window['lib-ui'];
     *  const DateSelector = libUI.DateSelector;
     *  const formatDate = libUI.formatDate;
     *  
     *  
     *  // 解析 document.body 下所有符合条件的元素，转换为日期选择框，第二个参数可选
     *  DateSelector.resolve(document.body, function (date) {
     *      console.log(`element(#${this.element.id}), date changed to: ${formatDate(date)}`);
     *      // 当日期选择改变时，控制台将会输出：element(#dateFrom), date changed to: 1/30/2024
     *  });
     *  
     *  
     *  // 在其他地方调用时
     *  const value = document.querySelector('#dateFrom').value;
     *  console.log(`dateFrom.value = '${value}', formatted: '${formatDate(value)}'`);
     *  // 控制台会输出：dateFrom.value = '2024-01-30', formatted: '1/30/2024'
     *  ```
     */
    static resolve(dom?: HTMLElement, trigger?: (this: DateSelector, date: Date) => void): HTMLElement;

    /**
     * 日期选择框构造函数
     * @param opts 日期选项参数
     */
    constructor(opts: {
        /** 最小可选择日期 */
        minDate?: string,
        /** 最大可选择日期 */
        maxDate?: string,
        /** 是否启用 */
        enabled?: boolean,
        /**
         * 自定义格式化函数，用于获取日期值时调用
         * @param date 日期值
         * @returns 返回格式化的值
         */
        valueFormatter?: (date: Date) => any
    });

    /**
     * 创建或转换日期选择框元素
     * @param element 转换该元素为日期选择框
     * @returns 返回创建或转换的日期选择元素
     */
    create(element?: HTMLInputElement): HTMLInputElement;

    /** 获取日期选择框元素 */
    get element(): HTMLInputElement;

    /** 获取日期选择框是否启用 */
    get enabled(): boolean;
    /** 设置日期选择框启用状态 */
    set enabled(flag: boolean);

    /** 获取设置的日期值，或经过格式化函数返回的值 */
    get value(): Date | any;
    /** 设置日期值，支持的格式参见 {@linkcode formatDate} */
    set value(val: Date | number | string);

    /** 获取最小可选择日期 */
    get minDate(): string;
    /** 设置最小可选择日期 */
    set minDate(date: string);

    /** 获取最大可选择日期 */
    get maxDate(): string;
    /** 设置最大可选择日期 */
    set maxDate(date: string);

    /**
     * 日期发生变化时触发的事件
     * @param date 日期值，或者经自定义参数中格式化函数格式后的值
     * @eventProperty
     */
    onDateChanged?: (this: DateSelector, date: Date | any) => void;
}