diff --git a/packages/ui/src/DateRanger/PickerPanel.tsx b/packages/ui/src/DateRanger/PickerPanel.tsx index 45c689c15..12ff3e57e 100644 --- a/packages/ui/src/DateRanger/PickerPanel.tsx +++ b/packages/ui/src/DateRanger/PickerPanel.tsx @@ -18,15 +18,12 @@ import { Space, TimePicker, } from '@oceanbase/design'; -import type { FormItemProps } from '@oceanbase/design'; import { noop } from 'lodash'; import moment from 'moment'; import dayjs from 'dayjs'; -import { useUpdate } from 'ahooks'; -import { toArray } from '@oceanbase/util'; import { getPrefix } from '../_util'; import { DATE_TIME_MONTH_FORMAT, DATE_TIME_MONTH_FORMAT_CN } from './constant'; -type RangeValue = [Moment, Moment] | [Dayjs, Dayjs]; +import type { RangeValue } from './Ranger'; type ValidateTrigger = 'submit' | 'valueChange'; type MaybeArray = T | T[]; @@ -58,7 +55,7 @@ const TIME_FORMAT = 'HH:mm:ss'; const InternalPickerPanel = (props: PickerPanelProps) => { const { - defaultValue = [], + defaultValue, isMoment, locale, tip, @@ -259,6 +256,7 @@ const InternalPickerPanel = (props: PickerPanelProps) => { label={locale.startDate} validateStatus={errorTypeMap['startDate']} style={{ marginBottom: 8 }} + rules={[{ required: true }]} > { style={{ marginBottom: 8 }} validateStatus={errorTypeMap['startTime']} initialValue={defaultS || defaultTime} + rules={[{ required: true }]} > { label={locale.endDate} style={{ marginBottom: 0 }} validateStatus={errorTypeMap['endDate']} + rules={[{ required: true }]} > { @@ -348,6 +348,7 @@ const InternalPickerPanel = (props: PickerPanelProps) => { style={{ marginBottom: 0 }} validateStatus={errorTypeMap['endTime']} initialValue={defaultE || defaultTime} + rules={[{ required: true }]} > { rangeChange(range); setRangeName(CUSTOMIZE); }; - const disabledFuture = (current: Moment | Dayjs) => { const futureDay = moment.isMoment(current) ? moment().endOf('day') : dayjs().endOf('day'); // 禁止选择未来日期 @@ -304,7 +303,6 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => { const currentRange = selects.find(_item => _item.name === rangeName); const rangeLabel = rangeName === CUSTOMIZE ? getCustomizeRangeLabel() : currentRange?.rangeLabel; - const label = rangeName === CUSTOMIZE ? getCustomizeLabel() @@ -360,7 +358,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => { {originNode} { { @@ -467,6 +465,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => { suffixIcon={null} // 透传 props 到 antd Ranger {...omit(rest, 'value', 'onChange')} + open={false} /> )} diff --git a/packages/ui/src/DateRanger/demo/basic.tsx b/packages/ui/src/DateRanger/demo/basic.tsx index 472a85b0b..f3919bec3 100644 --- a/packages/ui/src/DateRanger/demo/basic.tsx +++ b/packages/ui/src/DateRanger/demo/basic.tsx @@ -26,6 +26,14 @@ export default () => { { + if (value) { + console.log(value[0].format(), value[1].format()); + } else { + console.log(value); + } + }} + allowClear={true} hasForward={getValue('hasForward')} hasRewind={getValue('hasRewind')} hasNow={getValue('hasNow')} diff --git a/packages/ui/src/DateRanger/demo/locale.tsx b/packages/ui/src/DateRanger/demo/locale.tsx index 91ce60ef3..76750a751 100644 --- a/packages/ui/src/DateRanger/demo/locale.tsx +++ b/packages/ui/src/DateRanger/demo/locale.tsx @@ -33,7 +33,7 @@ export default () => { - + diff --git a/packages/ui/src/DateRanger/index.less b/packages/ui/src/DateRanger/index.less index aeb52bb0d..584c19e08 100644 --- a/packages/ui/src/DateRanger/index.less +++ b/packages/ui/src/DateRanger/index.less @@ -14,11 +14,19 @@ // FIXED: 存在不生效情况 .@{prefix}-picker { padding-left: 0px; + padding-right: 16px; border: 0px; - pointer-events: none; input { text-align: center; } + // 覆盖默认 antd 样式,定制出 RangerPicker 整体的感觉 + .@{prefixCls}-picker-active-bar { + height: 0; + } + + .@{prefixCls}-picker-input > input { + cursor: pointer; + } } &:hover {