plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/components/DatePicker/panel/DatePanelDate.tsx

@@ -0,0 +1,278 @@
+import {classnames, computed, createEventListener, designComponent, getComponentCls, iMouseEvent, PropType} from "plain-design-composition";
+import {DateItemData, DatePanelItemWrapper, DatePanelWrapper, DatePublicEmits, DatePublicProps, DefaultDateFormatString, eDateView, eDateViewSeq, eSlideTransitionDirection} from "../date.utils";
+import {PDate, plainDate} from "../../../utils/plainDate";
+import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
+import {Button} from "../../Button";
+import {DatePanelMonth} from "./DatePanelMonth";
+import {zeroize} from "plain-utils/string/zeroize";
+import {TimePanel} from "../../TimePicker/panel/TimePanel";
+import {ThemeSize} from "../../../uses/useStyle";
+import i18n from "../../i18n";
+
+/**
+ * 日期面板
+ * @author  韦胜健
+ * @date    2022/12/12 10:58
+ */
+export const DatePanelDate = designComponent({
+  name: 'date-panel-date',
+  props: {
+    ...DatePublicProps,
+    view: { type: String as PropType<eDateView>, default: eDateView.date },
+  },
+  emits: {
+    ...DatePublicEmits,
+    // onUpdateModelValue: (val?: string, ipd?: PDate) => true,
+    onClick: (did: DateItemData) => true,
+    onMouseenter: (did: DateItemData) => true,
+    onSelectTime: (val: string) => true,
+    onSelectDateChange: (pd: PDate) => true,
+    onMouseleaveDateList: (e: iMouseEvent) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const {
+      model,
+      state,
+      today,
+      getStatus,
+      displayFormat,
+      valueFormat,
+      viewModel,
+      setSelectDate,
+      handler,
+      parent,
+    } = useDatePanel({
+      props,
+      emit,
+      jdView: UseDateJudgementView.YMD,
+      processPd: {
+        value: (pd) => {
+          if (!props.datetime) return pd;
+          pd = pd.useHms(showTimePd.value);
+          if (!!state.topState.max && state.topState.max.YMDHms < pd.YMDHms) {pd = state.topState.max;}
+          if (!!state.topState.min && state.topState.min.YMDHms > pd.YMDHms) {pd = state.topState.min;}
+          return pd;
+        }
+      },
+    });
+
+    const utils = {
+      setSelectDate: (val: PDate | string | undefined, autoEmit = true) => {
+        let pd: PDate;
+        if (!val) {
+          pd = today;
+        } else {
+          pd = typeof val !== "string" ? val : today.useValue(val);
+        }
+        setSelectDate(pd);
+        if (autoEmit) {
+          emit.onSelectDateChange(pd);
+        }
+      }
+    };
+
+    const weekList = computed(() => {
+      const weeks = [
+        i18n('week.sunday').d('日'),
+        i18n('week.monday').d('一'),
+        i18n('week.tuesday').d('二'),
+        i18n('week.wednesday').d('三'),
+        i18n('week.thursday').d('四'),
+        i18n('week.friday').d('五'),
+        i18n('week.saturday').d('六'),
+      ];
+      return weeks.slice(props.firstWeekDay).concat(weeks.slice(0, props.firstWeekDay));
+    });
+
+    const dateList = computed(() => {
+      const { selectDate } = state;
+      let pd = today.useYMD([selectDate.year, selectDate.month, 1]);
+      const currentMonthFirstDate = pd.clone();
+      let weekDayDuration = currentMonthFirstDate.day - props.firstWeekDay;
+      let offsetDay = weekDayDuration === 0 ? 7 : weekDayDuration > 0 ? weekDayDuration : 7 + weekDayDuration;
+      let firstDateTime = new Date(currentMonthFirstDate.time! - (offsetDay) * 24 * 60 * 60 * 1000).getTime();
+      let list: DateItemData[] = [];
+      for (let i = 0; i < 42; i++) {
+        pd = pd.useTime(firstDateTime);
+        let item = {
+          label: pd.date,
+          pd,
+          ...getStatus(pd),
+          externals: {
+            isSelectMonth: pd.YM === selectDate.YM,
+          },
+        };
+        list.push(item);
+        firstDateTime += 24 * 60 * 60 * 1000;
+      }
+      return list;
+    });
+
+    const monthAttrs = computed(() => ({
+      modelValue: state.selectDate.getValue(),
+      displayFormat,
+      valueFormat,
+      view: viewModel.value,
+      onChange: externalHandler.onSelectMonthChange as any,
+    }));
+
+    const defaultTimePd = computed(() => {
+      const config = { displayFormat: DefaultDateFormatString.Hms, valueFormat: DefaultDateFormatString.Hms };
+      return !!props.defaultTime ?
+        plainDate(props.defaultTime, config) :
+        plainDate.today(config.displayFormat, config.valueFormat);
+    });
+
+    const showTimePd = computed(() => (state.pd.vpd as PDate | null) || defaultTimePd.value);
+
+    const timeAttrs = computed(() => {
+      const vpd = state.pd.vpd as PDate | null;
+      const timePd = vpd || defaultTimePd.value;
+      const attrs = {
+        modelValue: plainDate.format(timePd.getDate(), DefaultDateFormatString.Hms),
+        displayFormat: DefaultDateFormatString.Hms,
+        valueFormat: DefaultDateFormatString.Hms,
+        max: undefined as undefined | string,
+        min: undefined as undefined | string,
+        onChange: externalHandler.onSelectTime as any,
+      };
+      const { max, min } = state.topState;
+      if (!!vpd) {
+        /*限制最大最小值*/
+        if (!!max) {
+          if (max.YMD <= vpd.YMD) {
+            const maxPd = timePd.useHms(max);
+            attrs.max = plainDate.format(maxPd.getDate(), DefaultDateFormatString.Hms);
+          }
+        }
+        if (!!min) {
+          if (min.YMD >= vpd.YMD) {
+            const minPd = timePd.useHms(min);
+            attrs.min = plainDate.format(minPd.getDate(), DefaultDateFormatString.Hms);
+          }
+        }
+      }
+      return attrs;
+    });
+
+    const methods = {
+      /*上一年*/
+      prevYear() {utils.setSelectDate(state.selectDate.useYear(state.selectDate.year - 1));},
+      /*下一年*/
+      nextYear() {utils.setSelectDate(state.selectDate.useYear(state.selectDate.year + 1));},
+      /*上一月*/
+      prevMonth() {utils.setSelectDate(state.selectDate.useMonthDate(state.selectDate.month - 1, 1));},
+      /*下一月*/
+      nextMonth() {utils.setSelectDate(state.selectDate.useMonthDate(state.selectDate.month + 1, 1));},
+      /*切换视图*/
+      changeView: (view: eDateView) => {
+        if (view === viewModel.value) return;
+        const oldSeq = eDateViewSeq[viewModel.value];
+        const newSeq = eDateViewSeq[view];
+        state.slide = newSeq > oldSeq ? eSlideTransitionDirection.next : eSlideTransitionDirection.prev;
+        viewModel.value = view;
+      },
+    };
+
+    const externalHandler = {
+      onSelectMonthChange: (val: string) => {
+        utils.setSelectDate(state.selectDate.useValue(val));
+        methods.changeView(eDateView.date);
+      },
+      onSelectTime: (val: string) => {
+        if (!!parent) {return emit.onSelectTime(val);}
+        const timePd = defaultTimePd.value.useValue(val);
+        let vpd = state.pd.vpd as PDate | undefined || today;
+        vpd = vpd.useHms(timePd);
+        model.value = vpd.getValue();
+        emit.onSelectTime(val);
+      },
+      onClick: (did: DateItemData) => {
+        if (!!parent) {return emit.onClick(did);}
+        handler.onClick(did);
+      },
+      onMouseenter: (did: DateItemData) => {
+        if (!!parent) {return emit.onMouseenter(did);}
+        handler.onMouseenter(did);
+      },
+    };
+
+    const render = {
+      date: () => {
+        return DatePanelWrapper({
+          key: 'date',
+          className: getComponentCls("date-base-panel-date"),
+          left: (<>
+            <Button icon="pi-double-left" mode="text" size={ThemeSize.mini} onClick={methods.prevYear}/>
+            <Button icon="pi-left" mode="text" size={ThemeSize.mini} onClick={methods.prevMonth}/>
+          </>),
+          center: (<>
+            <span onClick={() => methods.changeView(eDateView.year)}>{state.selectDate.year}</span>
+            -
+            <span onClick={() => methods.changeView(eDateView.month)}>{zeroize(state.selectDate.month! + 1)}</span>
+            {!!props.datetime && (
+              <span className="date-base-panel-date-time-label" onClick={() => methods.changeView(eDateView.time)}>
+                {timeAttrs.value.modelValue}
+              </span>
+            )}
+          </>),
+          right: (<>
+            <Button icon="pi-right" mode="text" size={ThemeSize.mini} onClick={methods.nextMonth}/>
+            <Button icon="pi-double-right" mode="text" size={ThemeSize.mini} onClick={methods.nextYear}/>
+          </>),
+          content: (<>
+            <ul className="date-base-panel-date-week-list">
+              {weekList.value.map(item => (
+                <li className="date-base-panel-item date-base-panel-date-week-item" key={item}>
+                  <div><span>{item}</span></div>
+                </li>
+              ))}
+            </ul>
+            <ul className="date-base-panel-date-list" {...createEventListener({ onMouseLeave: emit.onMouseleaveDateList })}>
+              {dateList.value.map((item, index) => (
+                DatePanelItemWrapper({
+                  item,
+                  onClick: externalHandler.onClick,
+                  onMouseEnter: externalHandler.onMouseenter,
+                  Node: <div
+                    {...{
+                      // tag: 'li',
+                      className: classnames(['date-base-panel-date-item', { 'date-base-panel-date-item-other-month': !item.externals.isSelectMonth, }]),
+                      key: item.externals.isSelectMonth ? item.pd.date : `_${index}`,
+                    }}
+                  />,
+                })
+              ))}
+            </ul>
+          </>),
+        });
+      },
+      month: () => {
+        return <DatePanelMonth {...monthAttrs.value} direction="horizontal" key={viewModel.value}/>;
+      },
+      time: () => {
+        return DatePanelWrapper({
+          key: 'time',
+          className: 'date-base-panel-time',
+          center: (<>
+            <span onClick={() => methods.changeView(eDateView.date)}>
+              {showTimePd.value.year}-{zeroize(showTimePd.value.month! + 1)}-{zeroize(showTimePd.value.date!)}
+            </span>
+          </>),
+          content: <TimePanel {...timeAttrs.value}/>,
+        });
+      },
+    };
+
+    return {
+      render: () => (
+        <div className={`${getComponentCls("date-base-panel-date-wrapper")} ${getComponentCls("date-base-panel")}`}>
+          {/*<Transition name={getComponentCls(`transition-slide-${state.slide}`)}>*/}
+          {render[viewModel.value === eDateView.year ? eDateView.month : viewModel.value]()}
+          {/*</Transition>*/}
+        </div>
+      )
+    };
+  },
+});

package/src/packages/components/DatePicker/panel/DatePanelMonth.tsx

@@ -0,0 +1,190 @@
+import {DateItemData, DatePanelItemWrapper, DatePanelWrapper, DatePublicEmits, DatePublicProps, eDateView, eSlideTransitionDirection} from "../date.utils";
+import {computed, designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
+import {Button} from "../../Button";
+import {DatePanelYear} from "./DatePanelYear";
+import {ThemeSize} from "../../../uses/useStyle";
+import i18n from "../../i18n";
+
+/**
+ * 月份面板
+ * @author  韦胜健
+ * @date    2022/12/12 10:59
+ */
+export const DatePanelMonth = designComponent({
+  name: 'date-panel-month',
+  props: {
+    ...DatePublicProps,
+    view: { type: String as PropType<eDateView>, default: eDateView.month },
+  },
+  emits: {
+    ...DatePublicEmits,
+    onClick: (did: DateItemData) => true,
+    onMouseenter: (did: DateItemData) => true,
+    onMouseleaveList: (e: MouseEvent) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const months = computed(() => [
+      i18n('month.january').d('一月'),
+      i18n('month.february').d('二月'),
+      i18n('month.march').d('三月'),
+      i18n('month.april').d('四月'),
+      i18n('month.may').d('五月'),
+      i18n('month.june').d('六月'),
+      i18n('month.july').d('七月'),
+      i18n('month.august').d('八月'),
+      i18n('month.september').d('九月'),
+      i18n('month.october').d('十月'),
+      i18n('month.november').d('十一月'),
+      i18n('month.december').d('十二月'),
+    ]);
+
+    const {
+      state,
+      setSelectDate,
+      today,
+      getStatus,
+      handler,
+      viewModel,
+    } = useDatePanel({
+      props,
+      emit,
+      jdView: UseDateJudgementView.YM,
+      getSlide: (pd) => pd.year > state.selectDate.year ? eSlideTransitionDirection.next : eSlideTransitionDirection.prev,
+    });
+
+    const methods = {
+      /**
+       * 切换到上一年
+       * @author  韦胜健
+       * @date    2020/4/15 11:12
+       */
+      prevYear() {
+        state.slide = eSlideTransitionDirection.prev;
+        setSelectDate(state.selectDate.useYear(state.selectDate.year - 1));
+      },
+      /**
+       * 切换到下一年
+       * @author  韦胜健
+       * @date    2020/4/15 11:12
+       */
+      nextYear() {
+        state.slide = eSlideTransitionDirection.next;
+        setSelectDate(state.selectDate.useYear(state.selectDate.year + 1));
+      },
+    };
+
+    const monthList = computed(() => {
+      const { selectDate } = state;
+      let list: DateItemData[] = [];
+      [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].forEach(i => {
+        const pd = today.useYMD([selectDate.year, i, 1]);
+        const item = { label: /*selectDate.year + '-' +*/ months.value[i], pd, ...getStatus(pd) };
+        list.push(item);
+      });
+      return list;
+    });
+
+    const quarterList = computed(() => {
+      const { selectDate } = state;
+      let list: DateItemData[] = [];
+      [0, 1, 2, 3].forEach(i => {
+        const pd = today.useYear(selectDate.year).useMonthDate(i * 3, 1);
+        list.push({ label: `Q${i + 1}`, pd, ...getStatus(pd), });
+      });
+      return list;
+    });
+
+    const listClasses = useClasses(() => [
+      'date-base-panel-month-list',
+      {
+        'date-base-panel-month-list-show-quarter': props.showQuarter,
+      }
+    ]);
+
+    const externalHandler = {
+      /**
+       * 处理年份面板选择年份变化动作
+       * @author  韦胜健
+       * @date    2020/4/15 11:14
+       */
+      onSelectYearChange(val?: string | string[]) {
+        viewModel.value = eDateView.month;
+        setSelectDate(state.selectDate.useYear(val as any as number));
+      },
+      onClick: (did: DateItemData) => {
+        emit.onClick(did);
+        handler.onClick(did);
+      },
+      onMouseenter: (did: DateItemData) => {
+        emit.onMouseenter(did);
+        handler.onMouseenter(did);
+      },
+    };
+
+    return {
+      render: () => {
+
+        const Month = DatePanelWrapper({
+          className: getComponentCls("date-base-panel-month"),
+          left: <Button icon="pi-double-left" mode="text" size={ThemeSize.mini} onClick={methods.prevYear}/>,
+          center: <span onClick={() => viewModel.value = eDateView.year}>{state.selectDate.year}</span>,
+          right: <Button icon="pi-double-right" mode="text" size={ThemeSize.mini} onClick={methods.nextYear}/>,
+          bodyAttrs: { onMouseLeave: emit.onMouseleaveList },
+          content: (<>
+            {props.showQuarter && (
+              // <Transition name={getComponentCls(`transition-slide-${state.slide}`)}>
+              <ul {...{
+                className: 'date-base-panel-month-quarter-list',
+                key: 'quarter_' + state.selectDate.year!,
+                direction: 'vertical'
+              }}>
+                {quarterList.value.map(item => (DatePanelItemWrapper({
+                  item,
+                  onClick: externalHandler.onClick,
+                  onMouseEnter: externalHandler.onMouseenter,
+                  Node: <li className="date-base-panel-month-item" key={item.label}/>,
+                })))}
+              </ul>
+              // </Transition>
+            )}
+            {/*<Transition name={getComponentCls(`transition-slide-${state.slide}`)}>*/}
+            <ul {...{
+              className: listClasses.value,
+              key: String(state.selectDate.year!),
+              direction: 'vertical'
+            }}>
+              {monthList.value.map(item => (DatePanelItemWrapper({
+                item,
+                onClick: externalHandler.onClick,
+                onMouseEnter: externalHandler.onMouseenter,
+                Node: <li className="date-base-panel-month-item" key={item.label}/>,
+              })))}
+            </ul>
+            {/*</Transition>*/}
+          </>)
+        }) as any;
+
+        const Wrapper = (
+          <div {...{
+            className: `${getComponentCls("date-base-panel")} ${getComponentCls("date-base-panel-month-wrapper")}`,
+            // direction: props.direction,
+          }}>
+            {/*<Transition name={getComponentCls(`transition-slide-${viewModel.value === eDateView.year ? 'prev' : 'next'}`)}>*/}
+            {viewModel.value === eDateView.month ?
+              Month
+              :
+              (<DatePanelYear
+                modelValue={String(state.selectDate.year)}
+                onUpdateModelValue={externalHandler.onSelectYearChange}
+                direction="horizontal"/>)}
+            {/*</Transition>*/}
+          </div>
+        ) as any;
+
+        return Wrapper;
+      }
+    };
+  },
+});

package/src/packages/components/DatePicker/panel/DatePanelQuarter.tsx

@@ -0,0 +1,50 @@
+import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import {DatePublicEmits, DatePublicProps} from "../date.utils";
+import {useDateWeek} from "./useDateWeek";
+import {UseDateJudgementView} from "./useDatePanel";
+import {PDate} from "../../../utils/plainDate";
+import {DatePanelMonth} from "./DatePanelMonth";
+
+/**
+ * 季度面板
+ * @author  韦胜健
+ * @date    2022/12/12 10:59
+ */
+export const DatePanelQuarter = designComponent({
+  name: 'date-panel-quarter',
+  props: {
+    ...DatePublicProps,
+  },
+  emits: {
+    ...DatePublicEmits,
+  },
+  setup({ props, event: { emit } }) {
+
+    const { useDateData, externalHandler } = useDateWeek({
+      props,
+      emit,
+      jdView: UseDateJudgementView.YM,
+      getDateData: (pd: PDate) => {
+        let month = pd.month;
+        let quarter = Math.floor(month / 3);
+        const spd = pd.useMonthDate(quarter * 3, 1);
+        const epd = pd.useMonthDate(spd.month + 2, 1);
+        return [spd, epd];
+      },
+    });
+
+    const monthAttrs = computed(() => ({
+      className: getComponentCls("date-panel-quarter"),
+      selectDate: useDateData.state.selectDate,
+      onMouseenter: externalHandler.onMouseenter,
+      onClick: externalHandler.onClick,
+      onMouseleaveList: externalHandler.onMouseleaveDateList,
+      // onSelectDateChange: useDateData.setSelectDate,
+      showQuarter: true,
+    }));
+
+    return {
+      render: () => <DatePanelMonth {...monthAttrs.value}/>
+    };
+  },
+});

package/src/packages/components/DatePicker/panel/DatePanelRange.tsx

@@ -0,0 +1,146 @@
+import {computed, designComponent, getComponentCls, PropType} from "plain-design-composition";
+import {DatePublicEmits, DatePublicProps, DefaultDateFormatString, eDateEmitRangeType, eDateView} from "../date.utils";
+import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
+import {PDate, plainDate} from "../../../utils/plainDate";
+import {DatePanelDate} from "./DatePanelDate";
+
+const DefaultTime = {
+  start: '00:00:00',
+  end: '23:59:59'
+};
+
+/**
+ * 日期范围选择面板
+ * @author  韦胜健
+ * @date    2022/12/12 10:59
+ */
+export const DatePanelRange = designComponent({
+  name: 'date-panel-range',
+  props: {
+    ...DatePublicProps,
+    range: { type: Boolean, default: true },
+    view: { type: String as PropType<eDateView>, default: eDateView.date }
+  },
+  emits: {
+    ...DatePublicEmits,
+    mousedown: (e: MouseEvent, type: eDateEmitRangeType) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const {
+      state,
+      displayFormat,
+      valueFormat,
+      startModel,
+      endModel,
+      handler,
+      setSelectDate,
+      today,
+    } = useDatePanel({
+      props,
+      emit,
+      jdView: UseDateJudgementView.YMD,
+      processPd: {
+        range: (spd, epd) => {
+          spd = spd.useHms(state.pd.spd || defaultTimePd.value.start);
+          epd = epd.useHms(state.pd.epd || defaultTimePd.value.end);
+          return utils.processPd(spd, epd);
+        }
+      },
+    });
+
+    const defaultTimePd = computed(() => {
+      const config = { displayFormat: DefaultDateFormatString.Hms, valueFormat: DefaultDateFormatString.Hms };
+      return {
+        start: plainDate(props.defaultStartTime || DefaultTime.start, config),
+        end: plainDate(props.defaultEndTime || DefaultTime.end, config),
+      };
+    });
+
+    const utils = {
+      processPd: (argSpd: PDate | null, argEpd: PDate | null) => {
+        let spd = argSpd || argEpd!;
+        let epd = argEpd || argSpd!;
+        const { max, min } = state.topState;
+        const jdView = props.datetime ? 'YMDHms' : 'YMD';
+        if (!!max) {
+          if (max[jdView] < spd[jdView]) spd = max;
+          if (max[jdView] < epd[jdView]) epd = max;
+        }
+        if (!!min) {
+          if (min[jdView] > spd[jdView]) spd = min;
+          if (min[jdView] > epd[jdView]) epd = min;
+        }
+        return spd[jdView] > epd[jdView] ? {
+          spd: epd,
+          epd: spd,
+        } : {
+          spd, epd
+        };
+      },
+    };
+
+    const externalHandler = {
+      onSelectTime: (val: string, type: eDateEmitRangeType) => {
+        let pd = (type === eDateEmitRangeType.start ? state.pd.spd : state.pd.epd) || today;
+        pd = pd.useHms(defaultTimePd.value.start.useValue(val));
+        const { spd, epd } = utils.processPd(type === eDateEmitRangeType.start ? pd : state.pd.spd, type === eDateEmitRangeType.end ? pd : state.pd.epd);
+        startModel.value = spd.getDisplay();
+        endModel.value = epd.getDisplay();
+        state.range = {
+          hover: null,
+          value: [spd, epd],
+        };
+        emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
+        emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
+      }
+    };
+
+    const binding = computed(() => {
+      const startSelectDate = state.selectDate;
+      const publicProps = Object.keys(DatePublicProps).reduce((ret, key) => {
+        (ret as any)[key] = (props as any)[key];
+        return ret;
+      }, {});
+      Object.assign(publicProps, {
+        displayFormat: displayFormat,
+        valueFormat: valueFormat,
+      });
+      const start = {
+        ...publicProps,
+        selectDate: startSelectDate,
+        modelValue: startModel.value,
+        defaultTime: props.defaultStartTime || DefaultTime.start,
+
+        onSelectDateChange: setSelectDate,
+        onMouseenter: handler.onMouseenter,
+        onClick: handler.onClick,
+        onSelectTime: (val: string) => externalHandler.onSelectTime(val, eDateEmitRangeType.start),
+        onMouseDown: (e: MouseEvent) => emit.mousedown(e, eDateEmitRangeType.start),
+      };
+      const endSelectDate = startSelectDate.useMonthDate(startSelectDate.month + 1, 1);
+      const end = {
+        ...publicProps,
+        selectDate: endSelectDate,
+        modelValue: endModel.value,
+        defaultTime: props.defaultEndTime || DefaultTime.end,
+
+        onSelectDateChange: (val: PDate) => setSelectDate(val.useMonthDate(val.month - 1, 1)),
+        onMouseenter: handler.onMouseenter,
+        onClick: handler.onClick,
+        onSelectTime: (val: string) => externalHandler.onSelectTime(val, eDateEmitRangeType.end),
+        onMouseDown: (e: MouseEvent) => emit.mousedown(e, eDateEmitRangeType.end),
+      };
+      return { start, end };
+    });
+
+    return {
+      render: () => (
+        <div className={`${getComponentCls("date-base-panel")} ${getComponentCls("date-panel-date-range")}`}>
+          <DatePanelDate {...binding.value.start}/>
+          <DatePanelDate {...binding.value.end}/>
+        </div>
+      )
+    };
+  },
+});