@gez/date-time-kit
Version:
127 lines (126 loc) • 5.59 kB
TypeScript
import { type DateTimeGranularity } from '../../utils';
import { type Ele as CalendarBaseEle, type Weeks } from '../calendar';
import type { Ele as EchoEle } from '../echo';
import type { DateFormatterFn, DatetimeFormatterFn, TimeFormatterFn } from '../echo/utils';
import type { Ele as HhMmSsMsSelectorEle } from '../hhmmss-ms-list-grp/selector';
import type { Ele as PopoverEle } from '../popover';
import { type reExportPopoverAttrs } from '../popover/attr-sync-helper';
import { type BaseAttrs, type BaseEmits, type Emit2EventMap, UiBase } from '../web-component-base';
import { Ele as YyyyMmNavEle } from '../yyyymm-nav';
import type { Ele as YyyyMmDdSelectorEle } from '../yyyymmdd-list-grp/selector';
export declare const granularityList: readonly ["millisecond", "second", "minute", "hour", "day", "month", "year"];
export type Granularity = DateTimeGranularity;
export type Attrs = BaseAttrs & reExportPopoverAttrs & {
/**
* Set which day of the week is the first day.
* @type `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'`
* @default 'sun'
*/
'week-start-at'?: Weeks;
/**
* The time of the calendar.
* @type {`string | number`} A value that can be passed to the Date constructor.
* @default Math.min('max-time', Math.max('min-time', Date.now()))
*/
'current-time'?: string | number;
/**
* The showing time, used to determine the month to show on calendar.
* @type {`string | number`} A value that can be passed to the Date constructor.
* @default 'current-time'
*/
'showing-time'?: string | number;
/**
* 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
* 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。忽略的时间单位将被重置为 0。
*/
'min-granularity'?: DateTimeGranularity;
/**
* 选择器的粒度，表示最大可选的时间单位。默认为 year。
* 例如设置为 'day'，则表示只能选择到日，年和月秒将被忽略。忽略的时间单位将被重置为 0、1972（离1970最近的闰年）。
*/
'max-granularity'?: DateTimeGranularity;
/**
* The minimum time of the calendar display range.
* @type {`string | number`} A value that can be passed to the Date constructor.
*/
'min-time'?: string | number;
/**
* The maximum time of the calendar display range.
* @type {`string | number`} A value that can be passed to the Date constructor.
*/
'max-time'?: string | number;
};
export interface Emits extends BaseEmits {
'select-time': Date;
'open-change': boolean;
}
export type EventMap = Emit2EventMap<Emits>;
/**
* 日期时间选择器（单个时间点）
* 包括日历和时分秒毫秒选择。
*
* - 存在一个 timeFormatter 方法，用于格式化时分秒毫秒显示时间。
* - 存在一个 dateFormatter 方法，用于格式化年月日显示时间。
*/
export declare class Ele extends UiBase<Attrs, Emits> {
static readonly tagName: "dt-date-time-selector";
protected static _style: string;
protected static _template: string;
static get observedAttributes(): string[];
private _getTimeAttr;
private _setTimeAttr;
private _getMaxMinTime;
get currentTime(): number | string | Date;
set currentTime(val: number | string | Date);
get showingTime(): number | string | Date;
set showingTime(val: number | string | Date);
get minTime(): number | string | Date;
set minTime(val: number | string | Date);
get maxTime(): number | string | Date;
set maxTime(val: number | string | Date);
get weekStartAt(): Weeks;
set weekStartAt(val: Weeks);
get minGranularity(): DateTimeGranularity;
set minGranularity(val: DateTimeGranularity);
get maxGranularity(): DateTimeGranularity;
set maxGranularity(val: DateTimeGranularity);
get _staticEls(): {
readonly hostWrapper: HTMLElement;
readonly nav: YyyyMmNavEle;
readonly calendar: CalendarBaseEle;
readonly timeSelectorInCalendar: HhMmSsMsSelectorEle;
readonly timeSelectorOnly: HhMmSsMsSelectorEle;
readonly dateSelector: YyyyMmDdSelectorEle;
readonly timeSelectorInDate: HhMmSsMsSelectorEle;
readonly popover: PopoverEle;
readonly slots: any[];
readonly echoInDate: EchoEle;
readonly echoInPopover: EchoEle;
};
private get _minmaxGran();
private get _granType();
private _updateSlot;
private _updateOpenState;
get open(): boolean;
set open(v: boolean);
private _ob;
connectedCallback(): void;
disconnectedCallback(): boolean | void;
protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
private _render;
private _onCalendarSelect;
private _onNavChange;
private _onNavOpenToggle;
private _onTimeSelectorChange;
private _onDateSelectorSelect;
private _onConfirmBtnClick;
/** 时分秒毫秒回显格式化函数。设置为 `null` 则重置为默认值 */
get timeFormatter(): TimeFormatterFn;
set timeFormatter(fn: TimeFormatterFn | null);
/** 年月日回显格式化函数。设置为 `null` 则重置为默认值 */
get dateFormatter(): DateFormatterFn;
set dateFormatter(fn: DateFormatterFn | null);
/** 日期时间回显格式化函数。设置为 `null` 则重置为默认值 */
get dateTimeFormatter(): DatetimeFormatterFn;
set dateTimeFormatter(fn: DatetimeFormatterFn | null);
}