chore: update DatePicker types (#2730)

types/date-picker/common.d.ts

@@ -2,91 +2,136 @@
 // Definitions by: akki-jat <https://github.com/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;
 }

types/date-picker/date-picker.d.ts

@@ -2,24 +2,21 @@
 // Definitions by: akki-jat <https://github.com/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 {
+declare class DatePickerProps extends DatepickerProps {
-  static RangePicker: typeof RangePicker;
-  static MonthPicker: typeof MonthPicker;
-  static WeekPicker: typeof WeekPicker;
-
   /**
    * 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;
 }

types/date-picker/month-picker.d.ts

@@ -2,21 +2,22 @@
 // Definitions by: akki-jat <https://github.com/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;
 }

types/date-picker/range-picker.d.ts

@@ -2,27 +2,28 @@
 // Definitions by: akki-jat <https://github.com/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;
 }

types/date-picker/week-picker.d.ts

@@ -2,21 +2,22 @@
 // Definitions by: akki-jat <https://github.com/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;
 }