jamis/lib/r-calendar/InputDateRange.types.d.ts

一种支持通过JSON配置方式生成页面的组件库

import type { LocaleProps, SchemaClassName, ThemeProps } from 'jamis-core';
import type { DateExpression, DateRangeValue, DateRanges, FormBaseControlSchema, FormControlProps, SchemaExpression } from '../types';
/**
 * DateRange 日期范围控件
 *
 */
export interface DateRangeControlSchema extends FormBaseControlSchema {
    /**
     * 指定为日期范围控件
     */
    type: 'input-date-range' | 'input-datetime-range' | 'input-time-range';
    /**
     * 分割符, 因为有两个值，开始时间和结束时间，所以要有连接符。默认为英文逗号。
     *
     */
    delimiter?: string;
    /**
     * 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.
     */
    format?: string;
    /**
     * 默认 `YYYY-MM-DD` 用来配置显示的时间格式。
     */
    inputFormat?: string;
    timeFormat?: string;
    /**
     * 开启后将选中的选项 value 的值用连接符拼接起来，作为当前表单项的值。如： `value1,value2` 否则为 `[value1, value2]`
     */
    joinValues?: boolean;
    /**
     * 最大日期限制，支持变量 $xxx 来取值，或者用相对值如：* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
     */
    maxDate?: string;
    /**
     * 最小日期限制，支持变量 $xxx 来取值，或者用相对值如：* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
     */
    minDate?: string;
    /**
     * 最大跨度，比如 2days
     */
    maxDuration?: string;
    /**
     * 最小跨度，比如 2days
     */
    minDuration?: string;
    /**
     * 这里面 value 需要特殊说明一下，因为支持相对值。* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
     */
    value?: any;
    /**
     * 边框模式，全边框，还是半边框，或者没边框。
     */
    borderMode?: 'full' | 'half' | 'none';
    /**
     * 开启后变成非弹出模式，即内联模式。
     */
    embed?: boolean;
    /**
     * 日期范围快捷键
     */
    ranges?: Array<DateRangeValue | {
        label: string;
        value?: DateRangeValue;
        startDate?: DateExpression;
        endDate?: DateExpression;
    }> | string;
    rangesPosition?: 'picker' | 'input';
    rangesRefDate?: SchemaExpression;
    rangesClassName?: SchemaClassName;
    /**
     * 日期范围开始时间-占位符
     */
    startPlaceholder?: string;
    /**
     * 日期范围结束时间-占位符
     */
    endPlaceholder?: string;
    /**
     * 是否启用游标动画，默认开启
     */
    animation?: boolean;
    /** 元素`.cxd-DateRangePicker-input`的样式类 */
    pickerInputClassName?: SchemaClassName;
}
export interface DateRangeProps extends FormControlProps, Omit<DateRangeControlSchema, 'className' | 'descriptionClassName' | 'inputClassName'> {
    delimiter: string;
    format: string;
    joinValues: boolean;
}
/**
 * MonthRange 月范围控件
 *
 */
export interface MonthRangeControlSchema extends Omit<DateRangeControlSchema, 'type'> {
    type: 'input-month-range';
}
/**
 * QuarterRange 季度范围控件
 *
 */
export interface QuarterRangeControlSchema extends Omit<DateRangeControlSchema, 'type'> {
    type: 'input-quarter-range';
}
/**
 * YearRange 年份范围控件
 */
export interface YearRangeControlSchema extends Omit<DateRangeControlSchema, 'type'> {
    type: 'input-year-range';
}
export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
    className?: string;
    popoverClassName?: string;
    placeholder?: string;
    theme?: any;
    format: string;
    utc?: boolean;
    inputFormat?: string;
    timeFormat?: string;
    ranges?: string | DateRanges;
    clearable?: boolean;
    minDate?: moment.Moment;
    maxDate?: moment.Moment;
    minDuration?: moment.Duration;
    maxDuration?: moment.Duration;
    joinValues: boolean;
    delimiter: string;
    value?: any;
    data?: any;
    disabled?: boolean;
    closeOnSelect?: boolean;
    overlayPlacement: string;
    resetValue?: any;
    popOverContainer?: any;
    embed?: boolean;
    label?: string | false;
    onFocus?: Function;
    onChange: (value: any) => void;
    onBlur?: Function;
}