126 lines
4.4 KiB
TypeScript
126 lines
4.4 KiB
TypeScript
/**
|
||
* 创建或转换日期选择框
|
||
* @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;
|
||
} |