关闭Ant Design RangePicker后重置视图至当前日期的实现

当RangePicker未选中任何日期就关闭时，再次打开会保留上次导航的日期位置。要实现无选中状态下每次打开都显示当前日期视图，可通过控制Picker的打开状态和默认视图值来解决：

实现思路 #

• 用状态跟踪Picker的打开/关闭状态
• 打开Picker且无选中日期时，强制设置默认视图为当前日期

修改后的完整代码 #

import { useState } from 'react';

import { LineOutlined } from '@ant-design/icons';
import { DatePicker, TimeRangePickerProps } from 'antd';
import { RangePickerProps } from 'antd/es/date-picker';
import dayjs, { Dayjs } from 'dayjs';
import { RangeValue } from 'rc-picker/lib/interface';

type MaybeNull<T> = T | null;
type PropType = { handleRangeSelect?: (arg1: MaybeNull<string[]>) => void };

export const CustomRageSelect = ({ handleRangeSelect }: PropType) => {
  const [dateRange, setDateRange] = useState<RangeValue<Dayjs> | undefined>(null);
  const [pickerOpen, setPickerOpen] = useState(false);

  const { RangePicker } = DatePicker;
  const today = dayjs();
  const firstDayOfThisWeek = today.startOf('week').add(1, 'days');
  const lastDayOfThisWeek = today.endOf('day');
  const firstDayOfLastWeek = firstDayOfThisWeek.subtract(1, 'week');

  const rangePresets: TimeRangePickerProps['presets'] = [
    { label: '今日', value: [today, today] },
    { label: '昨日', value: [today.subtract(1, 'day'), today] },
    { label: '本周', value: [firstDayOfThisWeek, lastDayOfThisWeek] },
    { label: '上周', value: [firstDayOfLastWeek, firstDayOfLastWeek.add(6, 'days')] },
    { label: '本月', value: [today.startOf('month'), today] },
    { label: '上月', value: [today.subtract(1, 'month').startOf('month'), today.subtract(1, 'month').endOf('month')] },
    { label: '本年', value: [today.startOf('year'), today] },
    { label: '上年', value: [today.subtract(1, 'year').startOf('year'), today.subtract(1, 'year').endOf('year')] },
    { label: '全部时间', value: null as unknown as [dayjs.Dayjs, dayjs.Dayjs] },
  ];

  const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {
    if (dates) {
      setDateRange(dates as RangeValue<Dayjs>);
      handleRangeSelect?.(dateStrings);
    } else {
      setDateRange(null);
      handleRangeSelect?.(null);
    }
  };

  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    const tenYearsAgo = dayjs().subtract(10, 'years');
    return current !== null && (dayjs(current).isAfter(dayjs(), 'day') || dayjs(current).isBefore(tenYearsAgo, 'day'));
  };

  const handleOpenChange = (open: boolean) => {
    setPickerOpen(open);
  };

  return (
    <RangePicker
      presets={rangePresets}
      onChange={onRangeChange}
      value={dateRange}
      className="btn-style heading5 font-weight-600 font-size-14 "
      separator={<LineOutlined rotate={90} style={{ color: '#E0E0E0', maxWidth: '248px' }} />}
      style={{ minWidth: '240px', gap: '0' }}
      picker="date"
      disabledDate={disabledDate}
      open={pickerOpen}
      onOpenChange={handleOpenChange}
      // 无选中日期时，默认视图定位到当前日期
      defaultPickerValue={dateRange || [today, today]}
    />
  );
};

关键修改点 #

1. 新增pickerOpen状态：同步Picker的打开状态，确保能准确控制视图重置时机
2. 动态defaultPickerValue：当dateRange为null（无选中日期）时，将默认视图设置为[today, today]，强制Picker打开时回到当前日期视图
3. 简化逻辑：用可选链调用handleRangeSelect?.(...)替代条件判断，代码更简洁

这样调整后，只要没有选中任何日期，每次打开RangePicker都会自动显示当前日期所在的视图，不会停留在之前导航过的历史位置。

内容的提问来源于stack exchange，提问作者Haseeb Ahmed