plain-design 1.0.0-beta.147 → 1.0.0-beta.149

package/src/packages/components/DatePicker/date.utils.tsx

@@ -1,398 +1,398 @@
-/**
- * 当前面板的视图
- * @author  韦胜健
- * @date    2021/1/18 10:43
- */
-import {ComponentEvent, createSyncHooks, ExtractPropTypes, getComponentCls, mergeAttrs, PropType, RenderNode, tSlotsType} from "@peryl/react-compose";
-import {PDate, plainDate} from "../../utils/plainDate";
-import {classnames} from "@peryl/utils/classnames";
-import {UseDateType} from "./panel/useDatePanel";
-import {eMultipleValueType} from "../../uses/useMultipleModel";
-import {EditProps, tEditComputed} from "../../uses/useEdit";
-import {StyleProps, tStyleComputed} from "../../uses/useStyle";
-import {Input} from "../Input";
-import i18n from "../i18n";
-import {iPopupEditorUseOption} from "../usePopupEditor";
-import React from "react";
-
-/**
- * 日期面板视图类型，对应各个组件,一个面板至少有一个或者两个视图
- * @author  韦胜健
- * @date    2022.7.4 13:58
- */
-export enum eDateView {
-  year = 'year',                    // 年份面板
-  month = 'month',                  // 月份面板
-  date = 'date',                    // 日期面板
-  time = 'time',                    // 时间面板
-}
-
-/**
- * 日期面板视图类型，对应各个组件
- * @author  韦胜健
- * @date    2022.7.4 13:59
- */
-export enum eDatePanel {
-  year = 'year',
-  month = 'month',
-  date = 'date',
-  week = 'week',
-  quarter = 'quarter',
-}
-
-/**
- * 跟节点切换动画的方向
- * @author  韦胜健
- * @date    2021/1/18 10:43
- */
-export enum eSlideTransitionDirection {
-  next = 'next',
-  prev = 'prev'
-}
-
-/**
- * 在派发modelValue时，派发的start还是end事件
- * @author  韦胜健
- * @date    2021/1/18 10:44
- */
-export enum eDateEmitRangeType {
-  start = 'start',
-  end = 'end',
-}
-
-/**
- * 面板的默认格式化字符串
- * @author  韦胜健
- * @date    2021/1/18 10:46
- */
-export const DefaultDateFormatString = {
-  year: 'YYYY',
-  month: 'YYYY-MM',
-  date: 'YYYY-MM-DD',
-  datetime: 'YYYY-MM-DD HH:mm:ss',
-  week: 'YYYY-MM-DD',
-  Hms: 'HH:mm:ss',
-};
-
-export const getDefaultDateFormatter = (() => {
-  function getDefaultDateValueFormat(panel: keyof typeof eDatePanel, datetime?: boolean) {
-    switch (panel) {
-      case eDatePanel.year:
-        return DefaultDateFormatString.year;
-      case eDatePanel.month:
-        return DefaultDateFormatString.month;
-      case eDatePanel.date:
-        return datetime ? DefaultDateFormatString.datetime : DefaultDateFormatString.date;
-      case eDatePanel.week:
-        return DefaultDateFormatString.date;
-      case eDatePanel.quarter:
-        return DefaultDateFormatString.month;
-    }
-    throw new Error(`can't recognise date panel:` + panel);
-  }
-
-  function getDefaultDateDisplayFormat(panel: keyof typeof eDatePanel, datetime?: boolean) {
-    switch (panel) {
-      case eDatePanel.year:
-        return DefaultDateFormatString.year;
-      case eDatePanel.month:
-        return DefaultDateFormatString.month;
-      case eDatePanel.date:
-        return datetime ? DefaultDateFormatString.datetime : DefaultDateFormatString.date;
-      case eDatePanel.week:
-        return i18n.$it('formatter.week').d('gggg年第ww周');
-      case eDatePanel.quarter:
-        return i18n.$it('formatter.quarter').d('YYYY年第Q季度');
-    }
-    throw new Error(`can't recognise date panel:` + panel);
-  }
-
-  return (panel: keyof typeof eDatePanel, datetime?: boolean) => ({
-    displayFormat: getDefaultDateDisplayFormat(panel, datetime),
-    valueFormat: getDefaultDateValueFormat(panel, datetime),
-  });
-})();
-
-/**
- * 面板的优先级
- * @author  韦胜健
- * @date    2022.7.4 14:01
- */
-export const eDateViewSeq = {
-  year: 1,
-  month: 2,
-  date: 3,
-  time: 4,
-};
-
-/**
- * 各个面板组件公共属性
- * @author  韦胜健
- * @date    2022.7.4 14:01
- */
-export const DatePublicProps = {
-  modelValue: { type: [String, Array] as PropType<string | string[]> },         // 双向绑定值，单选时为单个字符串，多选时为字符串数组
-  start: { type: String },                                                      // 范围选择，起始值绑定值
-  end: { type: String },                                                        // 范围选择，截止值绑定值
-  displayFormat: { type: String },                                              // 显示值格式化字符串
-  valueFormat: { type: String },                                                // 值格式化字符串
-  max: { type: String },                                                        // 最大值
-  min: { type: String },                                                        // 最小值
-  range: { type: Boolean, default: false },                                     // 是否为范围选择，与multiple多选只能二选一
-  multiple: { type: Boolean },                                                  // 是否为 多选，与range多选只能二选一
-  valueType: { type: String as PropType<typeof eMultipleValueType.TYPE> },      // 多选的时候值的类型
-  separate: { type: Boolean },                                                  // 范围选择的时候，是否分开选择开始结束时间
-
-  firstWeekDay: { type: Number, default: 1 },                                   // 一周的第一个是星期几，0是星期天，1是星期一
-  defaultTime: { type: String, default: '00:00:00' },                           // 默认时间，如果没有初始值，选择日期的时候时间会取这里的默认时间
-  defaultStartTime: { type: String, default: '00:00:00' },                      // 日期范围选择起始选择框日期面板，默认时间，如果没有初始值，选择日期的时候时间会取这里的默认时间
-  defaultEndTime: { type: String, default: '23:59:59' },                        // 日期范围选择截止选择框日期面板，默认时间，如果没有初始值，选择日期的时候时间会取这里的默认时间
-  startPlaceholder: { type: String },                                           // 日期范围开始时间输入框空值占位符
-  endPlaceholder: { type: String },                                             // 日期范围结束时间输入框空值占位符
-
-  showQuarter: { type: Boolean },                                               // 月份面板是否显示季度
-  isQuarterActive: { type: Function as PropType<(did: DateItemData) => boolean> },// 季度是否高亮判断函数
-  panel: { type: String as PropType<eDatePanel | keyof typeof eDatePanel>, default: eDatePanel.date },    // 使用的面板类型
-  isItemDisabled: { type: Function as PropType<(pd: PDate, jdView: string) => boolean> },// 判断选项是否禁用
-  focusRangeType: { type: String as PropType<eDateEmitRangeType> },             // 当前获取焦点的范围选择位置
-
-  /*inner props*/
-  direction: { type: String, default: 'horizontal' },                           // 根节点在 transition-slide 动画下的动画方向，是horizontal还是vertical
-  view: { type: String as PropType<eDateView>, default: eDateView.month },        // 当前视图
-  selectDate: { type: Object as PropType<PDate> },                              // 当前面板的年月日期对象
-  datetime: { type: Boolean },                                                  // 是否为日期时间视图
-};
-
-export const DatePropsOptions = {
-  ...StyleProps,
-  ...EditProps,
-  ...DatePublicProps,
-  popperAttrs: { type: Object as PropType<iPopupEditorUseOption> },
-  inputAttrs: { type: Object as PropType<Partial<typeof Input.use.props>> },
-};
-
-export type iDatePropsType = ExtractPropTypes<typeof DatePropsOptions>
-
-/**
- * 所有面板的公共属性对象类型
- * @author  韦胜健
- * @date    2021/1/18 10:45
- */
-export type tDatePublicPropsType = ExtractPropTypes<typeof DatePublicProps>
-
-/**
- * 所有面板的公共派发事件配置对象
- * @author  韦胜健
- * @date    2021/1/18 10:45
- */
-export const DatePublicEmits = {
-  onUpdateModelValue: (val?: string | string[], rangeType?: eDateEmitRangeType) => true,
-  onUpdateStart: (val?: string) => true,
-  onUpdateEnd: (val?: string) => true,
-  onUpdateView: (view: eDateView) => true,
-  onReady: (data: UseDateType) => true,
-} as const;
-
-/**
- * 单个日期选项的数据类型
- * @author  韦胜健
- * @date    2021/1/18 16:04
- */
-export interface DateItemData {
-  label: string | number,
-  active: boolean,
-  now: boolean,
-  disabled: boolean,
-  start: boolean,
-  hover: boolean,
-  end: boolean,
-  clickable: boolean,
-  pd: PDate,
-  range: boolean,
-  externals?: any,
-  tempStart: boolean,
-  tempEnd: boolean,
-  tempHover: boolean,
-}
-
-/**
- * 面板容器渲染
- * @author  韦胜健
- * @date    2022.7.4 14:02
- */
-export function DatePanelWrapper(slots: {
-  key?: string,
-  className: string,
-  left?: RenderNode,
-  center: RenderNode,
-  right?: RenderNode,
-  content: RenderNode,
-  bodyAttrs?: any,
-}) {
-  return (
-    <div key={slots.key || 'default'} className={`${getComponentCls("date-base-panel")} ${slots.className}`}>
-      <div className="date-base-panel-header">
-        <div>{slots.left}</div>
-        <div>{slots.center}</div>
-        <div>{slots.right}</div>
-      </div>
-      <div {...mergeAttrs(
-        { className: 'date-base-panel-body' },
-        slots.bodyAttrs,
-      )}>
-        {slots.content}
-      </div>
-    </div>
-  );
-}
-
-/**
- * 面板中选项渲染
- * @author  韦胜健
- * @date    2022.7.4 14:02
- */
-export function DatePanelItemWrapper(
-  {
-    Node,
-    item,
-    onClick,
-    onMouseEnter,
-  }: {
-    Node: any,                                      // 容器节点
-    item: DateItemData,                             // item 数据
-    onClick: (item: DateItemData) => void,          // 点击item事件处理句柄
-    onMouseEnter: (item: DateItemData) => void,     // 进入item事件处理句柄
-  }) {
-
-  let listener = {} as any;
-  item.clickable && (listener.onClick = () => onClick(item));
-  !item.disabled && (listener.onMouseEnter = () => onMouseEnter(item));
-
-  return React.cloneElement(
-    Node,
-    mergeAttrs(Node.props, {
-      className: `${Node.props.class} ${classnames([
-        'date-base-panel-item',
-        {
-          'date-base-panel-item-active': item.active,
-          'date-base-panel-item-now': item.now,
-          'date-base-panel-item-disabled': item.disabled,
-          'date-base-panel-item-hover-start': item.start,
-          'date-base-panel-item-hover': item.hover,
-          'date-base-panel-item-hover-end': item.end,
-          'date-base-panel-item-temp-start': item.tempStart,
-          'date-base-panel-item-temp-end': item.tempEnd,
-          'date-base-panel-item-temp-hover': item.tempHover,
-        }
-      ])}`,
-      ...listener,
-    }),
-    (
-      <div>
-        <span>{item.label}</span>
-      </div>
-    )
-  );
-}
-
-/**
- * 日期公共工具函数
- * @author  韦胜健
- * @date    2022.7.4 14:02
- */
-export const DateCommonUtils = {
-  /*今天*/
-  today: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => plainDate(new Date(), { displayFormat, valueFormat }).getDayJs(),
-  /*昨天*/
-  yesterday: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
-    const today = DateCommonUtils.today(displayFormat, valueFormat);
-    return today.day(-1);
-  },
-  /*明天*/
-  tomorrow: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
-    const today = DateCommonUtils.today(displayFormat, valueFormat);
-    return today.day(+1);
-  },
-  week: {
-    start: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
-      const today = DateCommonUtils.today(displayFormat, valueFormat);
-      return today.startOf('week');
-    },
-    end: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
-      const today = DateCommonUtils.today(displayFormat, valueFormat);
-      return today.endOf('week');
-    },
-  },
-  month: {
-    start: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
-      const today = DateCommonUtils.today(displayFormat, valueFormat);
-      return today.startOf('month');
-    },
-    end: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
-      const today = DateCommonUtils.today(displayFormat, valueFormat);
-      return today.endOf('month');
-    },
-  },
-  year: {
-    start: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
-      const today = DateCommonUtils.today(displayFormat, valueFormat);
-      return today.startOf('year');
-    },
-    end: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
-      const today = DateCommonUtils.today(displayFormat, valueFormat);
-      return today.endOf('year');
-    },
-  },
-};
-
-/*
-console.log('今天', DateCommonUtils.today().format('YYYY-MM-DD'))
-console.log('明天', DateCommonUtils.tomorrow().format('YYYY-MM-DD'))
-console.log('昨天', DateCommonUtils.yesterday().format('YYYY-MM-DD'))
-console.log('本周第一天', DateCommonUtils.week.start().format('YYYY-MM-DD'))
-console.log('本周最后一天', DateCommonUtils.week.end().format('YYYY-MM-DD'))
-console.log('本月第一天', DateCommonUtils.month.start().format('YYYY-MM-DD'))
-console.log('本月最后一天', DateCommonUtils.month.end().format('YYYY-MM-DD'))
-console.log('本年第一天', DateCommonUtils.year.start().format('YYYY-MM-DD'))
-console.log('本年最后一天', DateCommonUtils.year.end().format('YYYY-MM-DD'))*/
-
-/**
- * Date选择器内部钩子
- * @author  韦胜健
- * @date    2022.7.4 14:02
- */
-export const useDatePickerHooks = () => {
-  return {
-    onRenderInput: createSyncHooks<(content: RenderNode) => void>(),
-  };
-};
-
-export const DateEmitsOptions = {
-  ...DatePublicEmits,
-  onBlur: (e: FocusEvent) => true,
-  onFocus: (e: FocusEvent) => true,
-} as const;
-
-export const DateSlotsOption = ['foot', 'default'] as const;
-
-export type tDatePickerHooks = ReturnType<typeof useDatePickerHooks>
-
-export type tDateCompositionPublicParams = {
-  props: tDatePublicPropsType & { inputAttrs?: any },
-  emit: ComponentEvent<typeof DateEmitsOptions>["emit"],
-  hooks: tDatePickerHooks,
-  slots: tSlotsType<typeof DateSlotsOption>,
-  formatString: {
-    value: {
-      displayFormat: string,
-      valueFormat: string,
-    }
-  },
-  getPublicPopperAttrs: () => any,
-  editComputed: tEditComputed,
-  styleComputed: tStyleComputed,
-  getInheritPublicDateAttrs: () => any,
-  displayPattern: { value: RegExp },
-  today: { value: PDate },
-  maxmin: { value: { max: null | PDate, min: null | PDate } },
-}
+/**
+ * 当前面板的视图
+ * @author  韦胜健
+ * @date    2021/1/18 10:43
+ */
+import {ComponentEvent, createSyncHooks, ExtractPropTypes, getComponentCls, mergeAttrs, PropType, RenderNode, tSlotsType} from "@peryl/react-compose";
+import {PDate, plainDate} from "../../utils/plainDate";
+import {classnames} from "@peryl/utils/classnames";
+import {UseDateType} from "./panel/useDatePanel";
+import {eMultipleValueType} from "../../uses/useMultipleModel";
+import {EditProps, tEditComputed} from "../../uses/useEdit";
+import {StyleProps, tStyleComputed} from "../../uses/useStyle";
+import {Input} from "../Input";
+import i18n from "../i18n";
+import {iPopupEditorUseOption} from "../usePopupEditor";
+import React from "react";
+
+/**
+ * 日期面板视图类型，对应各个组件,一个面板至少有一个或者两个视图
+ * @author  韦胜健
+ * @date    2022.7.4 13:58
+ */
+export enum eDateView {
+  year = 'year',                    // 年份面板
+  month = 'month',                  // 月份面板
+  date = 'date',                    // 日期面板
+  time = 'time',                    // 时间面板
+}
+
+/**
+ * 日期面板视图类型，对应各个组件
+ * @author  韦胜健
+ * @date    2022.7.4 13:59
+ */
+export enum eDatePanel {
+  year = 'year',
+  month = 'month',
+  date = 'date',
+  week = 'week',
+  quarter = 'quarter',
+}
+
+/**
+ * 跟节点切换动画的方向
+ * @author  韦胜健
+ * @date    2021/1/18 10:43
+ */
+export enum eSlideTransitionDirection {
+  next = 'next',
+  prev = 'prev'
+}
+
+/**
+ * 在派发modelValue时，派发的start还是end事件
+ * @author  韦胜健
+ * @date    2021/1/18 10:44
+ */
+export enum eDateEmitRangeType {
+  start = 'start',
+  end = 'end',
+}
+
+/**
+ * 面板的默认格式化字符串
+ * @author  韦胜健
+ * @date    2021/1/18 10:46
+ */
+export const DefaultDateFormatString = {
+  year: 'YYYY',
+  month: 'YYYY-MM',
+  date: 'YYYY-MM-DD',
+  datetime: 'YYYY-MM-DD HH:mm:ss',
+  week: 'YYYY-MM-DD',
+  Hms: 'HH:mm:ss',
+};
+
+export const getDefaultDateFormatter = (() => {
+  function getDefaultDateValueFormat(panel: keyof typeof eDatePanel, datetime?: boolean) {
+    switch (panel) {
+      case eDatePanel.year:
+        return DefaultDateFormatString.year;
+      case eDatePanel.month:
+        return DefaultDateFormatString.month;
+      case eDatePanel.date:
+        return datetime ? DefaultDateFormatString.datetime : DefaultDateFormatString.date;
+      case eDatePanel.week:
+        return DefaultDateFormatString.date;
+      case eDatePanel.quarter:
+        return DefaultDateFormatString.month;
+    }
+    throw new Error(`can't recognise date panel:` + panel);
+  }
+
+  function getDefaultDateDisplayFormat(panel: keyof typeof eDatePanel, datetime?: boolean) {
+    switch (panel) {
+      case eDatePanel.year:
+        return DefaultDateFormatString.year;
+      case eDatePanel.month:
+        return DefaultDateFormatString.month;
+      case eDatePanel.date:
+        return datetime ? DefaultDateFormatString.datetime : DefaultDateFormatString.date;
+      case eDatePanel.week:
+        return i18n.$it('formatter.week').d('gggg年第ww周');
+      case eDatePanel.quarter:
+        return i18n.$it('formatter.quarter').d('YYYY年第Q季度');
+    }
+    throw new Error(`can't recognise date panel:` + panel);
+  }
+
+  return (panel: keyof typeof eDatePanel, datetime?: boolean) => ({
+    displayFormat: getDefaultDateDisplayFormat(panel, datetime),
+    valueFormat: getDefaultDateValueFormat(panel, datetime),
+  });
+})();
+
+/**
+ * 面板的优先级
+ * @author  韦胜健
+ * @date    2022.7.4 14:01
+ */
+export const eDateViewSeq = {
+  year: 1,
+  month: 2,
+  date: 3,
+  time: 4,
+};
+
+/**
+ * 各个面板组件公共属性
+ * @author  韦胜健
+ * @date    2022.7.4 14:01
+ */
+export const DatePublicProps = {
+  modelValue: { type: [String, Array] as PropType<string | string[]> },         // 双向绑定值，单选时为单个字符串，多选时为字符串数组
+  start: { type: String },                                                      // 范围选择，起始值绑定值
+  end: { type: String },                                                        // 范围选择，截止值绑定值
+  displayFormat: { type: String },                                              // 显示值格式化字符串
+  valueFormat: { type: String },                                                // 值格式化字符串
+  max: { type: String },                                                        // 最大值
+  min: { type: String },                                                        // 最小值
+  range: { type: Boolean, default: false },                                     // 是否为范围选择，与multiple多选只能二选一
+  multiple: { type: Boolean },                                                  // 是否为 多选，与range多选只能二选一
+  valueType: { type: String as PropType<typeof eMultipleValueType.TYPE> },      // 多选的时候值的类型
+  separate: { type: Boolean },                                                  // 范围选择的时候，是否分开选择开始结束时间
+
+  firstWeekDay: { type: Number, default: 1 },                                   // 一周的第一个是星期几，0是星期天，1是星期一
+  defaultTime: { type: String, default: '00:00:00' },                           // 默认时间，如果没有初始值，选择日期的时候时间会取这里的默认时间
+  defaultStartTime: { type: String, default: '00:00:00' },                      // 日期范围选择起始选择框日期面板，默认时间，如果没有初始值，选择日期的时候时间会取这里的默认时间
+  defaultEndTime: { type: String, default: '23:59:59' },                        // 日期范围选择截止选择框日期面板，默认时间，如果没有初始值，选择日期的时候时间会取这里的默认时间
+  startPlaceholder: { type: String },                                           // 日期范围开始时间输入框空值占位符
+  endPlaceholder: { type: String },                                             // 日期范围结束时间输入框空值占位符
+
+  showQuarter: { type: Boolean },                                               // 月份面板是否显示季度
+  isQuarterActive: { type: Function as PropType<(did: DateItemData) => boolean> },// 季度是否高亮判断函数
+  panel: { type: String as PropType<eDatePanel | keyof typeof eDatePanel>, default: eDatePanel.date },    // 使用的面板类型
+  isItemDisabled: { type: Function as PropType<(pd: PDate, jdView: string) => boolean> },// 判断选项是否禁用
+  focusRangeType: { type: String as PropType<eDateEmitRangeType> },             // 当前获取焦点的范围选择位置
+
+  /*inner props*/
+  direction: { type: String, default: 'horizontal' },                           // 根节点在 transition-slide 动画下的动画方向，是horizontal还是vertical
+  view: { type: String as PropType<eDateView>, default: eDateView.month },        // 当前视图
+  selectDate: { type: Object as PropType<PDate> },                              // 当前面板的年月日期对象
+  datetime: { type: Boolean },                                                  // 是否为日期时间视图
+};
+
+export const DatePropsOptions = {
+  ...StyleProps,
+  ...EditProps,
+  ...DatePublicProps,
+  popperAttrs: { type: Object as PropType<iPopupEditorUseOption> },
+  inputAttrs: { type: Object as PropType<Partial<typeof Input.use.props>> },
+};
+
+export type iDatePropsType = ExtractPropTypes<typeof DatePropsOptions>
+
+/**
+ * 所有面板的公共属性对象类型
+ * @author  韦胜健
+ * @date    2021/1/18 10:45
+ */
+export type tDatePublicPropsType = ExtractPropTypes<typeof DatePublicProps>
+
+/**
+ * 所有面板的公共派发事件配置对象
+ * @author  韦胜健
+ * @date    2021/1/18 10:45
+ */
+export const DatePublicEmits = {
+  onUpdateModelValue: (val?: string | string[], rangeType?: eDateEmitRangeType) => true,
+  onUpdateStart: (val?: string) => true,
+  onUpdateEnd: (val?: string) => true,
+  onUpdateView: (view: eDateView) => true,
+  onReady: (data: UseDateType) => true,
+} as const;
+
+/**
+ * 单个日期选项的数据类型
+ * @author  韦胜健
+ * @date    2021/1/18 16:04
+ */
+export interface DateItemData {
+  label: string | number,
+  active: boolean,
+  now: boolean,
+  disabled: boolean,
+  start: boolean,
+  hover: boolean,
+  end: boolean,
+  clickable: boolean,
+  pd: PDate,
+  range: boolean,
+  externals?: any,
+  tempStart: boolean,
+  tempEnd: boolean,
+  tempHover: boolean,
+}
+
+/**
+ * 面板容器渲染
+ * @author  韦胜健
+ * @date    2022.7.4 14:02
+ */
+export function DatePanelWrapper(slots: {
+  key?: string,
+  className: string,
+  left?: RenderNode,
+  center: RenderNode,
+  right?: RenderNode,
+  content: RenderNode,
+  bodyAttrs?: any,
+}) {
+  return (
+    <div key={slots.key || 'default'} className={`${getComponentCls("date-base-panel")} ${slots.className}`}>
+      <div className="date-base-panel-header">
+        <div>{slots.left}</div>
+        <div>{slots.center}</div>
+        <div>{slots.right}</div>
+      </div>
+      <div {...mergeAttrs(
+        { className: 'date-base-panel-body' },
+        slots.bodyAttrs,
+      )}>
+        {slots.content}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 面板中选项渲染
+ * @author  韦胜健
+ * @date    2022.7.4 14:02
+ */
+export function DatePanelItemWrapper(
+  {
+    Node,
+    item,
+    onClick,
+    onMouseEnter,
+  }: {
+    Node: any,                                      // 容器节点
+    item: DateItemData,                             // item 数据
+    onClick: (item: DateItemData) => void,          // 点击item事件处理句柄
+    onMouseEnter: (item: DateItemData) => void,     // 进入item事件处理句柄
+  }) {
+
+  let listener = {} as any;
+  item.clickable && (listener.onClick = () => onClick(item));
+  !item.disabled && (listener.onMouseEnter = () => onMouseEnter(item));
+
+  return React.cloneElement(
+    Node,
+    mergeAttrs(Node.props, {
+      className: `${Node.props.class} ${classnames([
+        'date-base-panel-item',
+        {
+          'date-base-panel-item-active': item.active,
+          'date-base-panel-item-now': item.now,
+          'date-base-panel-item-disabled': item.disabled,
+          'date-base-panel-item-hover-start': item.start,
+          'date-base-panel-item-hover': item.hover,
+          'date-base-panel-item-hover-end': item.end,
+          'date-base-panel-item-temp-start': item.tempStart,
+          'date-base-panel-item-temp-end': item.tempEnd,
+          'date-base-panel-item-temp-hover': item.tempHover,
+        }
+      ])}`,
+      ...listener,
+    }),
+    (
+      <div>
+        <span>{item.label}</span>
+      </div>
+    )
+  );
+}
+
+/**
+ * 日期公共工具函数
+ * @author  韦胜健
+ * @date    2022.7.4 14:02
+ */
+export const DateCommonUtils = {
+  /*今天*/
+  today: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => plainDate(new Date(), { displayFormat, valueFormat }).getDayJs(),
+  /*昨天*/
+  yesterday: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
+    const today = DateCommonUtils.today(displayFormat, valueFormat);
+    return today.day(-1);
+  },
+  /*明天*/
+  tomorrow: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
+    const today = DateCommonUtils.today(displayFormat, valueFormat);
+    return today.day(+1);
+  },
+  week: {
+    start: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
+      const today = DateCommonUtils.today(displayFormat, valueFormat);
+      return today.startOf('week');
+    },
+    end: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
+      const today = DateCommonUtils.today(displayFormat, valueFormat);
+      return today.endOf('week');
+    },
+  },
+  month: {
+    start: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
+      const today = DateCommonUtils.today(displayFormat, valueFormat);
+      return today.startOf('month');
+    },
+    end: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
+      const today = DateCommonUtils.today(displayFormat, valueFormat);
+      return today.endOf('month');
+    },
+  },
+  year: {
+    start: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
+      const today = DateCommonUtils.today(displayFormat, valueFormat);
+      return today.startOf('year');
+    },
+    end: (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
+      const today = DateCommonUtils.today(displayFormat, valueFormat);
+      return today.endOf('year');
+    },
+  },
+};
+
+/*
+console.log('今天', DateCommonUtils.today().format('YYYY-MM-DD'))
+console.log('明天', DateCommonUtils.tomorrow().format('YYYY-MM-DD'))
+console.log('昨天', DateCommonUtils.yesterday().format('YYYY-MM-DD'))
+console.log('本周第一天', DateCommonUtils.week.start().format('YYYY-MM-DD'))
+console.log('本周最后一天', DateCommonUtils.week.end().format('YYYY-MM-DD'))
+console.log('本月第一天', DateCommonUtils.month.start().format('YYYY-MM-DD'))
+console.log('本月最后一天', DateCommonUtils.month.end().format('YYYY-MM-DD'))
+console.log('本年第一天', DateCommonUtils.year.start().format('YYYY-MM-DD'))
+console.log('本年最后一天', DateCommonUtils.year.end().format('YYYY-MM-DD'))*/
+
+/**
+ * Date选择器内部钩子
+ * @author  韦胜健
+ * @date    2022.7.4 14:02
+ */
+export const useDatePickerHooks = () => {
+  return {
+    onRenderInput: createSyncHooks<(content: RenderNode) => void>(),
+  };
+};
+
+export const DateEmitsOptions = {
+  ...DatePublicEmits,
+  onBlur: (e: FocusEvent) => true,
+  onFocus: (e: FocusEvent) => true,
+} as const;
+
+export const DateSlotsOption = ['foot', 'default'] as const;
+
+export type tDatePickerHooks = ReturnType<typeof useDatePickerHooks>
+
+export type tDateCompositionPublicParams = {
+  props: tDatePublicPropsType & { inputAttrs?: any },
+  emit: ComponentEvent<typeof DateEmitsOptions>["emit"],
+  hooks: tDatePickerHooks,
+  slots: tSlotsType<typeof DateSlotsOption>,
+  formatString: {
+    value: {
+      displayFormat: string,
+      valueFormat: string,
+    }
+  },
+  getPublicPopperAttrs: () => any,
+  editComputed: tEditComputed,
+  styleComputed: tStyleComputed,
+  getInheritPublicDateAttrs: () => any,
+  displayPattern: { value: RegExp },
+  today: { value: PDate },
+  maxmin: { value: { max: null | PDate, min: null | PDate } },
+}