当打开范围时选择ant design并更改年份并关闭它而不选择任何内容当再次打开时它仍然显示上一年

Question

当我打开 ant design range 时，选择并移至前几年，然后关闭它，而不选择任何日期或年份。 现在，当我重新打开它时，它仍然显示我导航到的最后几年。

每当我打开范围选择而不进行任何选择时，我想显示当前年份和日期。

这是我的代码

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 PropType = { handleRangeSelect?: (arg1: MaybeNull<string[]>) => void };

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

  const { RangePicker } = DatePicker;
  const today = dayjs();
  const firstDayOfThisWeek = today.startOf('week').add(1, 'days');
  const lastDayOfThisWeek = today.endOf('day'); // Assuming the week ends on Saturday

  const firstDayOfLastWeek = firstDayOfThisWeek.subtract(1, 'week');

  const rangePresets: TimeRangePickerProps['presets'] = [
    { label: 'Today', value: [today, today] },
    { label: 'Yesterday', value: [today.subtract(1, 'day'), today] },
    { label: 'This Week', value: [firstDayOfThisWeek, lastDayOfThisWeek] },
    { label: 'Last Week', value: [firstDayOfLastWeek, firstDayOfLastWeek.add(6, 'days')] },
    { label: 'This Month', value: [today.startOf('month'), today] },
    { label: 'Last Month', value: [today.subtract(1, 'month').startOf('month'), today.subtract(1, 'month').endOf('month')] },
    { label: 'This Year', value: [today.startOf('year'), today] },
    { label: 'Last Year', value: [today.subtract(1, 'year').startOf('year'), today.subtract(1, 'year').endOf('year')] },
    { label: 'All Time', 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 && handleRangeSelect(dateStrings);
    } else {
      setDateRange(null);
      handleRangeSelect && handleRangeSelect(null);
    }
  };

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

  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}
    />
  );
};

Answer 1

使用带有空依赖项数组的

dateRange

将

useEffect

状态重置为默认值。

import { useState, useEffect } from 'react'; // Add useEffect

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 PropType = { handleRangeSelect?: (arg1: MaybeNull<string[]>) => void };

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

  // Reset the date range to the current year and dates whenever the component is rendered
  useEffect(() => {
    const today = dayjs();
    setDateRange([today.startOf('year'), today]);
  }, []);

  const { RangePicker } = DatePicker;
  const today = dayjs();
  const firstDayOfThisWeek = today.startOf('week').add(1, 'days');
  const lastDayOfThisWeek = today.endOf('day'); // Assuming the week ends on Saturday

  const firstDayOfLastWeek = firstDayOfThisWeek.subtract(1, 'week');

  const rangePresets: TimeRangePickerProps['presets'] = [
    { label: 'Today', value: [today, today] },
    { label: 'Yesterday', value: [today.subtract(1, 'day'), today] },
    { label: 'This Week', value: [firstDayOfThisWeek, lastDayOfThisWeek] },
    { label: 'Last Week', value: [firstDayOfLastWeek, firstDayOfLastWeek.add(6, 'days')] },
    { label: 'This Month', value: [today.startOf('month'), today] },
    { label: 'Last Month', value: [today.subtract(1, 'month').startOf('month'), today.subtract(1, 'month').endOf('month')] },
    { label: 'This Year', value: [today.startOf('year'), today] },
    { label: 'Last Year', value: [today.subtract(1, 'year').startOf('year'), today.subtract(1, 'year').endOf('year')] },
    { label: 'All Time', 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 && handleRangeSelect(dateStrings);
    } else {
      setDateRange(null);
      handleRangeSelect && handleRangeSelect(null);
    }
  };

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

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}
    />
  );
};