@gez/date-time-kit
Version:
90 lines (89 loc) • 3.58 kB
TypeScript
import { type DateTimeGranularity } from '../../utils';
import { type Ele as CalendarBaseEle, type Weeks } from '../calendar';
import { Ele as HhMmSsMsSelectorEle } from '../hhmmss-ms-list-grp/selector';
import { type BaseAttrs, type BaseEmits, UiBase } from '../web-component-base';
import { Ele as YyyyMmNavEle } from '../yyyymm-nav';
export declare const granularityList: readonly ["millisecond", "second", "minute", "hour", "day", "month", "year"];
export type Granularity = DateTimeGranularity;
export interface Attrs extends BaseAttrs {
/**
* The start time of the calendar display range.
* @type {`string | number`} A value that can be passed to the Date constructor.
* @default Date.now()
*/
'time-start'?: string | number;
/**
* The end time of the calendar display range.
* @type {`string | number`} A value that can be passed to the Date constructor.
* @default 'time-start'
*/
'time-end': string | number;
/**
* 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
* 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。忽略的时间单位视情况重置为 0 或 23 或 59 或 999。
*/
'min-granularity'?: Granularity;
/**
* Set which day of the week is the first day.
* @type `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'`
* @default 'sun'
*/
'week-start-at'?: Weeks;
}
export interface Emits extends BaseEmits {
change: {
oldStartTime: Date;
oldEndTime: Date;
newStartTime: Date;
newEndTime: Date;
};
}
/**
* 时间段选择器（两个日历）
*
* 存在一个 timeFormatter 方法，可以重写该方法以自定义时分秒毫秒的回显格式。
*/
export declare class Ele extends UiBase<Attrs, Emits> {
static readonly tagName: "dt-period-selector";
protected static _style: string;
protected static _template: string;
static get observedAttributes(): string[];
get timeStart(): number | string | Date;
set timeStart(val: number | string | Date);
get timeEnd(): number | string | Date;
set timeEnd(val: number | string | Date);
get weekStartAt(): Weeks;
set weekStartAt(val: Weeks);
get minGranularity(): Granularity;
set minGranularity(val: Granularity);
get _staticEls(): {
readonly allNav: any[];
readonly startNav: YyyyMmNavEle;
readonly endNav: YyyyMmNavEle;
readonly calendars: any[];
readonly startCalendar: CalendarBaseEle;
readonly endCalendar: CalendarBaseEle;
readonly timeSelectors: any[];
readonly startTimeSelector: HhMmSsMsSelectorEle;
readonly endTimeSelector: HhMmSsMsSelectorEle;
};
private _selectedDate;
connectedCallback(): void;
protected _onScreenSizeChanged(isSmall: boolean): void;
protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
private _updateNavCtrlBtn;
private _render;
private _updateDateEcho;
private _getTimeSelectorMs;
private _updateDatePoint;
private _onCalendarSelect;
private _onCalendarItemHover;
abortSelecting(): void;
private _onNavChange;
private _onNavOpenToggle;
private _onTimeSelectorChange;
showCalendarDatePoint(): void;
dateFormatter: (time: Date, minGranularity: Granularity, isSmall: boolean) => string;
get timeFormatter(): HhMmSsMsSelectorEle["timeFormatter"];
set timeFormatter(fn: HhMmSsMsSelectorEle['timeFormatter']);
}