feat: update date-picker

antdv-demo

@@ -1 +1 @@
-Subproject commit e5569f28132b299accd77cbbbb7354f6308d25e5
+Subproject commit 2bead0607865ddfbb49f958507d55249b9b0f3c4

breakChange-2.x.md

@@ -97,3 +97,11 @@ renderItem(item, index) => renderItem({item, index}) 该用单参数
 ## TreeSelect
 
 treeData 中 scopedSlots => slots , v-model => v-model:value
+
+## datePicker
+
+dateRender
+
+(current: moment.Moment, today: moment.Moment) => ({current: moment.Moment, today: moment.Moment})
+
+monthCellContentRender (date, locale) => ({date, locale})

components/calendar/Header.jsx

@@ -58,7 +58,7 @@ export default {
 
       const options = [];
       for (let index = start; index < end; index++) {
-        options.push(<Option key={`${index}`}>{index + suffix}</Option>);
+        options.push(<Option key={`${index}`}>{(() => index + suffix)()}</Option>);
       }
       return (
         <Select
@@ -67,7 +67,7 @@ export default {
           class={`${prefixCls}-year-select`}
           onChange={this.onYearChange}
           value={String(year)}
-          getPopupContainer={() => this.calenderHeaderNode}
+          getPopupContainer={() => this.calendarHeaderNode}
         >
           {options}
         </Select>
@@ -90,7 +90,7 @@ export default {
         }
       }
       for (let index = start; index < end; index++) {
-        options.push(<Option key={`${index}`}>{months[index]}</Option>);
+        options.push(<Option key={`${index}`}>{(() => months[index])()}</Option>);
       }
 
       return (

components/calendar/index.jsx

@@ -143,24 +143,24 @@ const Calendar = {
       };
       return result;
     },
-    monthCellRender2(value) {
+    monthCellRender2({ current: value }) {
       const { _sPrefixCls, $slots } = this;
       const monthCellRender = this.monthCellRender || $slots.monthCellRender || noop;
       return (
         <div class={`${_sPrefixCls}-month`}>
           <div class={`${_sPrefixCls}-value`}>{value.localeData().monthsShort(value)}</div>
-          <div class={`${_sPrefixCls}-content`}>{monthCellRender(value)}</div>
+          <div class={`${_sPrefixCls}-content`}>{monthCellRender({ current: value })}</div>
         </div>
       );
     },
 
-    dateCellRender2(value) {
+    dateCellRender2({ current: value }) {
       const { _sPrefixCls, $slots } = this;
       const dateCellRender = this.dateCellRender || $slots.dateCellRender || noop;
       return (
         <div class={`${_sPrefixCls}-date`}>
           <div class={`${_sPrefixCls}-value`}>{zerofixed(value.date())}</div>
-          <div class={`${_sPrefixCls}-content`}>{dateCellRender(value)}</div>
+          <div class={`${_sPrefixCls}-content`}>{dateCellRender({ current: value })}</div>
         </div>
       );
     },

components/date-picker/RangePicker.jsx

@@ -414,7 +414,7 @@ export default {
         onMouseenter={this.onMouseEnter}
         onMouseleave={this.onMouseLeave}
       >
-        <VcDatePicker {...vcDatePickerProps} vSlots={$slots} children={input}></VcDatePicker>
+        <VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
       </span>
     );
   },

components/date-picker/WeekPicker.jsx

@@ -74,11 +74,11 @@ export default {
     saveInput(node) {
       this.input = node;
     },
-    weekDateRender(current) {
+    weekDateRender({ current }) {
       const selectedValue = this.$data._value;
       const { _prefixCls: prefixCls, $slots } = this;
       const dateRender = this.dateRender || $slots.dateRender;
-      const dateNode = dateRender ? dateRender(current) : current.date();
+      const dateNode = dateRender ? dateRender({ current }) : current.date();
       if (
         selectedValue &&
         current.year() === selectedValue.year() &&
@@ -208,7 +208,7 @@ export default {
     };
     return (
       <span class={classNames(className, pickerClass)} style={style} id={id}>
-        <VcDatePicker {...vcDatePickerProps} vSlots={$slots} children={input}></VcDatePicker>
+        <VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
       </span>
     );
   },

components/date-picker/createPicker.js

@@ -106,11 +106,11 @@ export default function createPicker(TheCalendar, props) {
         this.$emit('openChange', open);
       },
       focus() {
-        this.input.focus();
+        this.input?.focus();
       },
 
       blur() {
-        this.input.blur();
+        this.input?.blur();
       },
       renderFooter(...args) {
         const { $slots, _prefixCls: prefixCls } = this;
@@ -235,7 +235,6 @@ export default function createPicker(TheCalendar, props) {
         open,
         onOpenChange: this.handleOpenChange,
         style: props.popupStyle,
-        children: input,
       };
       return (
         <span
@@ -248,7 +247,10 @@ export default function createPicker(TheCalendar, props) {
           onMouseenter={this.onMouseEnter}
           onMouseleave={this.onMouseLeave}
         >
-          <VcDatePicker {...vcDatePickerProps} vSlots={omit($slots, ['default'])}></VcDatePicker>
+          <VcDatePicker
+            {...vcDatePickerProps}
+            vSlots={{ default: input, ...$slots }}
+          ></VcDatePicker>
         </span>
       );
     },

components/date-picker/interface.js

@@ -20,7 +20,7 @@ export const PickerProps = () => ({
   open: PropTypes.bool,
   disabledDate: PropTypes.func,
   showToday: PropTypes.bool,
-  dateRender: PropTypes.any, // (current: moment.Moment, today: moment.Moment) => React.ReactNode,
+  dateRender: PropTypes.any, // ({current: moment.Moment, today: moment.Moment}) => vNode,
   pickerClass: PropTypes.string,
   pickerInputClass: PropTypes.string,
   timePicker: PropTypes.any,

components/vc-calendar/src/Picker.jsx

@@ -34,7 +34,6 @@ const Picker = {
     format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
     // onChange: PropTypes.func,
     // onOpenChange: PropTypes.func,
-    children: PropTypes.func,
     getCalendarContainer: PropTypes.func,
     calendar: PropTypes.any,
     open: PropTypes.bool,
@@ -46,7 +45,7 @@ const Picker = {
     align: PropTypes.object.def(() => ({})),
     dropdownClassName: PropTypes.string,
     dateRender: PropTypes.func,
-    children: PropTypes.func.isRequired,
+    children: PropTypes.func,
   },
   mixins: [BaseMixin],
 
@@ -214,7 +213,7 @@ const Picker = {
       value: sValue,
       open: sOpen,
     };
-    const children = this.children(childrenState, props);
+    const children = this.$slots.default(childrenState);
     if (this.sOpen || !this.calendarElement) {
       this.calendarElement = this.getCalendarElement();
     }

components/vc-calendar/src/calendar/CalendarHeader.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getOptionProps, getListeners } from '../../../_util/props-util';
+import { getOptionProps } from '../../../_util/props-util';
 import MonthPanel from '../month/MonthPanel';
 import YearPanel from '../year/YearPanel';
 import DecadePanel from '../decade/DecadePanel';
@@ -52,7 +52,7 @@ const CalendarHeader = {
   methods: {
     onMonthSelect(value) {
       this.__emit('panelChange', value, 'date');
-      if (getListeners(this).monthSelect) {
+      if (this.$attrs.onMonthSelect) {
         this.__emit('monthSelect', value);
       } else {
         this.__emit('valueChange', value);

components/vc-calendar/src/date/DateTBody.jsx

@@ -211,9 +211,9 @@ const DateTBody = {
 
         let dateHtml;
         if (dateRender) {
-          dateHtml = dateRender(current, value);
+          dateHtml = dateRender({ current, today: value });
         } else {
-          const content = contentRender ? contentRender(current, value) : current.date();
+          const content = contentRender ? contentRender({ current, today: value }) : current.date();
           dateHtml = (
             <div
               key={getIdFromDate(current)}

components/vc-calendar/src/full-calendar/CalendarHeader.jsx

@@ -39,7 +39,7 @@ const CalendarHeader = {
 
       const options = [];
       for (let index = start; index < end; index++) {
-        options.push(<Select.Option key={`${index}`}>{index}</Select.Option>);
+        options.push(<Select.Option key={`${index}`}>{(() => index)()}</Select.Option>);
       }
       return (
         <Select
@@ -63,7 +63,7 @@ const CalendarHeader = {
 
       for (let index = 0; index < 12; index++) {
         t.month(index);
-        options.push(<Select.Option key={`${index}`}>{getMonthName(t)}</Select.Option>);
+        options.push(<Select.Option key={`${index}`}>{(() => getMonthName(t))()}</Select.Option>);
       }
 
       return (

components/vc-calendar/src/month/MonthTable.jsx

@@ -91,13 +91,13 @@ const MonthTable = {
         if (cellRender) {
           const currentValue = value.clone();
           currentValue.month(monthData.value);
-          cellEl = cellRender(currentValue, locale);
+          cellEl = cellRender({ current: currentValue, locale });
         } else {
           let content;
           if (contentRender) {
             const currentValue = value.clone();
             currentValue.month(monthData.value);
-            content = contentRender(currentValue, locale);
+            content = contentRender({ current: currentValue, locale });
           } else {
             content = monthData.content;
           }

components/vc-select/SelectTrigger.jsx

@@ -163,7 +163,6 @@ export default {
       dropdownStyle,
       dropdownMatchSelectWidth,
     } = props;
-    //const { mouseenter, mouseleave, popupFocus, dropdownVisibleChange } = getListeners(this);
     const dropdownPrefixCls = this.getDropdownPrefixCls();
     const popupClassName = {
       [dropdownClassName]: !!dropdownClassName,

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/date-picker/demo/basic';
+import demo from '../antdv-demo/docs/date-picker/demo/index';
 
 export default {
   components: {