diff --git a/types/date-picker/common.d.ts b/types/date-picker/common.d.ts index 3617d520c..c76b7ec6c 100644 --- a/types/date-picker/common.d.ts +++ b/types/date-picker/common.d.ts @@ -2,91 +2,136 @@ // Definitions by: akki-jat // Definitions: https://github.com/vueComponent/ant-design-vue/types -import { AntdComponent } from '../component'; import { Moment } from 'moment'; +import { VNodeChild } from 'vue'; +import { AntdComponent } from '../component'; -export declare class DatepickerCommon extends AntdComponent { +export declare class DatepickerProps { /** * Whether to show clear button * @default true * @type boolean */ - allowClear: boolean; + allowClear?: boolean; /** * get focus when component mounted * @default false * @type boolean */ - autofocus: boolean; + autofocus?: boolean; /** * custom rendering function for date cells by setting a scoped slot - * @type any (slot="dateRender" slot-scope="current, today") + * @type VNodeChild | JSX.Element (slot="dateRender" slot-scope="current, today") */ - dateRender: any; + dateRender?: VNodeChild | JSX.Element; /** * determine whether the DatePicker is disabled * @default false * @type boolean */ - disabled: boolean; + disabled?: boolean; /** * specify the date that cannot be selected * @type Function */ - disabledDate: (currentDate: Moment) => boolean; + disabledDate?: (currentDate?: Moment) => boolean; /** * to set the container of the floating layer, while the default is to create a div element in body * @type Function */ - getCalendarContainer: (trigger: any) => any; + getCalendarContainer?: (trigger?: any) => HTMLElement; /** * localization configuration * @type any */ - locale: any; + locale?: object; + + /** + * picker panel mode *(Cannot select year or month anymore? + * @see https://antdv.com/docs/vue/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore? + */ + mode?: 'time' | 'date' | 'month' | 'year' | 'decade'; /** * open state of picker * @type boolean */ - open: boolean; + open?: boolean; /** * placeholder of date input * @type string | string[] */ - placeholder: string | string[]; + placeholder?: string | string[]; /** * to customize the style of the popup calendar * @type object */ - popupStyle: object; + popupStyle?: object; /** * to customize the className of the popup calendar * @type string */ - dropdownClassName: string; + dropdownClassName?: string; /** * determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px * @type string */ - size: 'large' | 'small' | 'default'; + size?: 'large' | 'small' | 'default'; /** * The custom suffix icon * @type any (VNode | slot) */ - suffixIcon: any; + suffixIcon?: VNodeChild | JSX.Element; - inputReadOnly: boolean; - valueFormat: string; + /** + * Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) + * @version 1.5.4 + */ + inputReadOnly?: boolean; + + /** + * this value will be merged into placement's config, please refer to the settings + * @see https://github.com/yiminghe/dom-align + * @version 1.5.4 + */ + align?: object; + + /** + * optional, format of binding value. If not specified, the binding value will be a Date object + * @version 1.5.4 + */ + valueFormat?: string; + + /** + * a callback function, can be executed whether the popup calendar is popped up or closed + */ + onOpenChange?: (status?: any) => void; + + /** + * callback when picker panel mode is changed + */ + onPanelChange?: (value?: any, mode?: any) => void; +} + +export declare class DatepickerMethod extends AntdComponent { + /** + * remove focus + */ + blur(): void; + + /** + * get focus + */ + focus(): void; } diff --git a/types/date-picker/date-picker.d.ts b/types/date-picker/date-picker.d.ts index 83f7d0d20..60d8b4ed0 100644 --- a/types/date-picker/date-picker.d.ts +++ b/types/date-picker/date-picker.d.ts @@ -2,24 +2,21 @@ // Definitions by: akki-jat // Definitions: https://github.com/vueComponent/ant-design-vue/types -import { DatepickerCommon } from './common'; +import { DatepickerProps, DatepickerMethod } from './common'; import { Moment } from 'moment'; import { RangePicker } from './range-picker'; import { MonthPicker } from './month-picker'; import { WeekPicker } from './week-picker'; +import { VNodeChild } from 'vue'; -export declare class DatePicker extends DatepickerCommon { - static RangePicker: typeof RangePicker; - static MonthPicker: typeof MonthPicker; - static WeekPicker: typeof WeekPicker; - +declare class DatePickerProps extends DatepickerProps { /** * Defualt Value * @description to set default date * @default undefined * @type Moment */ - defaultValue: Moment | string; + defaultValue?: Moment | string; /** * Default Picker Value @@ -27,7 +24,7 @@ export declare class DatePicker extends DatepickerCommon { * @default undefined * @type Moment */ - defaultPickerValue: Moment | string; + defaultPickerValue?: Moment | string; /** * Disabled Time @@ -35,7 +32,7 @@ export declare class DatePicker extends DatepickerCommon { * @default undefined * @type Function (function(date)) */ - disabledTime: Function; + disabledTime?: Function; /** * Format @@ -43,7 +40,7 @@ export declare class DatePicker extends DatepickerCommon { * @default 'YYYY-MM-DD' * @type string */ - format: string; + format?: string; /** * Render Extra Footer @@ -51,7 +48,7 @@ export declare class DatePicker extends DatepickerCommon { * @default undefined * @type any (slot="renderExtraFooter") */ - renderExtraFooter: any; + renderExtraFooter?: VNodeChild | JSX.Element; /** * Show Time @@ -61,7 +58,7 @@ export declare class DatePicker extends DatepickerCommon { * @default TimePicker Options * @type object | boolean */ - showTime: object | boolean; + showTime?: object | boolean; /** * Show Today @@ -69,7 +66,7 @@ export declare class DatePicker extends DatepickerCommon { * @default true * @type boolean */ - showToday: boolean; + showToday?: boolean; /** * Value @@ -77,5 +74,23 @@ export declare class DatePicker extends DatepickerCommon { * @default undefined * @type Moment */ - value: Moment | string; + value?: Moment | string; + + /** + * a callback function, can be executed when the selected time is changing + */ + onChange?: (date?: Moment | string, dateString?: string) => void; + + /** + * callback when click ok button + */ + onOk?: () => void; +} + +export declare class DatePicker extends DatepickerMethod { + static RangePicker: typeof RangePicker; + static MonthPicker: typeof MonthPicker; + static WeekPicker: typeof WeekPicker; + + $props: DatePickerProps; } diff --git a/types/date-picker/month-picker.d.ts b/types/date-picker/month-picker.d.ts index 9034747cc..80f53b657 100644 --- a/types/date-picker/month-picker.d.ts +++ b/types/date-picker/month-picker.d.ts @@ -2,21 +2,22 @@ // Definitions by: akki-jat // Definitions: https://github.com/vueComponent/ant-design-vue/types -import { DatepickerCommon } from './common'; +import { DatepickerMethod, DatepickerProps } from './common'; import { Moment } from 'moment'; +import { VNodeChild } from 'vue'; -export declare class MonthPicker extends DatepickerCommon { +declare class MonthPickerProps extends DatepickerProps { /** * to set default date * @type Moment */ - defaultValue: Moment | string; + defaultValue?: Moment | string; /** * to set default picker date * @type Moment */ - defaultPickerValue: Moment | string; + defaultPickerValue?: Moment | string; /** * to set the date format, When an array is provided, all values are used for parsing and first value for display. refer to moment.js @@ -24,23 +25,32 @@ export declare class MonthPicker extends DatepickerCommon { * @type string | string[] * @see http://momentjs.com */ - format: string | string[]; + format?: string | string[]; /** * Custom month cell content render method by setting a scoped slot * @type Function (slot="monthCellContentRender", slot-scope="date, locale") */ - monthCellContentRender: Function; + monthCellContentRender?: Function | VNodeChild | JSX.Element; /** * render extra footer in panel by setting a scoped slot * @type any (slot="renderExtraFooter") */ - renderExtraFooter: any; + renderExtraFooter?: Function | VNodeChild | JSX.Element; /** * to set date * @type Moment */ - value: Moment | string; + value?: Moment | string; + + /** + * a callback function, can be executed when the selected time is changing + */ + onChange?: (date?: Moment | string, dateString?: string) => void; +} + +export declare class MonthPicker extends DatepickerMethod { + $props: MonthPickerProps; } diff --git a/types/date-picker/range-picker.d.ts b/types/date-picker/range-picker.d.ts index 565cc50e8..237b8ed18 100644 --- a/types/date-picker/range-picker.d.ts +++ b/types/date-picker/range-picker.d.ts @@ -2,27 +2,28 @@ // Definitions by: akki-jat // Definitions: https://github.com/vueComponent/ant-design-vue/types -import { DatepickerCommon } from './common'; +import { DatepickerMethod, DatepickerProps } from './common'; import { Moment } from 'moment'; +import { VNodeChild } from 'vue'; -export declare class RangePicker extends DatepickerCommon { +declare class RangePickerProps extends DatepickerProps { /** * to set default date * @type [Moment, Moment] */ - defaultValue: [Moment, Moment] | [string, string]; + defaultValue?: [Moment, Moment] | [string, string]; /** * to set default picker date * @type [Moment, Moment] */ - defaultPickerValue: [Moment, Moment] | [string, string]; + defaultPickerValue?: [Moment, Moment] | [string, string]; /** * to specify the time that cannot be selected * @type Function */ - disabledTime: (dates: [Moment, Moment], partial: 'start' | 'end') => any; + disabledTime?: (dates: [Moment, Moment], partial: 'start' | 'end') => any; /** * to set the date format, refer to moment.js @@ -30,19 +31,26 @@ export declare class RangePicker extends DatepickerCommon { * @type string * @see http://momentjs.com */ - format: string; + format?: string; /** * preseted ranges for quick selection * @type object */ - ranges: { [range: string]: Moment[] } | { [range: string]: () => Moment[] }; + ranges?: { [range: string]: Moment[] } | { [range: string]: () => Moment[] }; /** * render extra footer in panel by setting a scoped slot * @type any (slot="renderExtraFooter") */ - renderExtraFooter: any; + renderExtraFooter?: Function | VNodeChild | JSX.Element; + + /** + * set separator between inputs + * @default '~' + * @version 1.5.0 + */ + separator?: string; /** * to provide an additional time selection @@ -50,11 +58,33 @@ export declare class RangePicker extends DatepickerCommon { * @default TimePicker Options * @type object | boolean */ - showTime: object | boolean; + showTime?: object | boolean; /** * to set date * @type [Moment, Moment] */ - value: [Moment, Moment] | [string, string]; + value?: [Moment, Moment] | [string, string]; + + /** + * a callback function, can be executed when the start time or the end time of the range is changing + */ + onCalendarChange?: ( + dates?: [Moment, Moment] | [string, string], + dateStrings?: [string, string], + ) => void; + + /** + * a callback function, can be executed when the selected time is changing + */ + onChange?: (dates?: [Moment, Moment] | [string, string], dateStrings?: [string, string]) => void; + + /** + * callback when click ok button + */ + onOk?: (dates?: [Moment, Moment] | [string, string]) => void; +} + +export declare class RangePicker extends DatepickerMethod { + $props: RangePickerProps; } diff --git a/types/date-picker/week-picker.d.ts b/types/date-picker/week-picker.d.ts index 2921afa51..fe7a3e4a6 100644 --- a/types/date-picker/week-picker.d.ts +++ b/types/date-picker/week-picker.d.ts @@ -2,21 +2,22 @@ // Definitions by: akki-jat // Definitions: https://github.com/vueComponent/ant-design-vue/types -import { DatepickerCommon } from './common'; +import { DatepickerMethod, DatepickerProps } from './common'; import { Moment } from 'moment'; +import { VNodeChild } from 'vue'; -export declare class WeekPicker extends DatepickerCommon { +declare class WeekPickerProps extends DatepickerProps { /** * to set default date * @type Moment */ - defaultValue: Moment | string; + defaultValue?: Moment | string; /** * to set default picker date * @type Moment */ - defaultPickerValue: Moment | string; + defaultPickerValue?: Moment | string; /** * to set the date format, refer to moment.js @@ -24,11 +25,26 @@ export declare class WeekPicker extends DatepickerCommon { * @type string * @see http://momentjs.com */ - format: string; + format?: string; /** * to set date * @type Moment */ - value: Moment | string; + value?: Moment | string; + + /** + * render extra footer in panel by setting a slot + * v-slot:renderExtraFooter="mode" + */ + renderExtraFooter?: Function | VNodeChild | JSX.Element; + + /** + * a callback function, can be executed when the selected time is changing + */ + onChange?: (date?: Moment | string, dateString?: string) => void; +} + +export declare class WeekPicker extends DatepickerMethod { + $props: WeekPickerProps; }