我想在 Rsuite DateRangePicker 上打开结束日期日历视图

Question

我正在使用 rusite DateRangePicker，我只想在打开选择器时打开 end_date 日历视图。

 <DateRangePicker
    className='dashboardPicker'
    disabledDate={date => isAfter(date, getPreviousDay(new Date()))}
    format="dd MMM yyyy"
    value={dashboardFilter}
    portalId='root-portal'
    ranges={[]}
    editable={false}
    disabled={dashboardLoading}
    renderValue={value => {
        return moment(value[0]).format("DD MMM YYYY") + " - " + moment(value[1]).format("DD MMM YYYY")
    }}
    defaultCalendarValue={dashboardFilter.length > 0 && [moment(dashboardFilter[0]).format("DD MMM YYYY"), moment(dashboardFilter[1]).format("DD MMM YYYY")]}
    onChange={(e) => handleDashboardFilter(e)}
    placeholder='Select Date Range'
    showOneCalendar
    cleanable={false}
    character='-'
    caretAs={DateRangeOutlinedIcon}
    showMeridian
/>

我想在打开选择器时打开 end_date 日历视图。

Answer 1

要在 rsuite 的 DateRangePicker 中默认打开结束日期日历视图，您可以使用 ref 以编程方式控制组件。通过设置 onOpen 处理程序，您可以在打开选取器时将焦点放在结束日期日历上。

1. 向 DateRangePicker 添加引用。
2. 实现 onOpen 处理程序以关注结束日期日历。

import React, { useRef } from 'react';
import { DateRangePicker } from 'rsuite';
import moment from 'moment';
import DateRangeOutlinedIcon from '@material-ui/icons/DateRangeOutlined';

const DashboardDateRangePicker = ({ dashboardFilter, handleDashboardFilter, dashboardLoading }) => {
    const dateRangePickerRef = useRef();

    const handleOpen = () => {
        if (dateRangePickerRef.current) {
            setTimeout(() => {
                dateRangePickerRef.current.update({
                    calendar: 'end'
                });
            }, 0);
        }
    };

    return (
        <DateRangePicker
            ref={dateRangePickerRef}
            className='dashboardPicker'
            disabledDate={date => isAfter(date, getPreviousDay(new Date()))}
            format="dd MMM yyyy"
            value={dashboardFilter}
            portalId='root-portal'
            ranges={[]}
            editable={false}
            disabled={dashboardLoading}
            renderValue={value => {
                return moment(value[0]).format("DD MMM YYYY") + " - " + moment(value[1]).format("DD MMM YYYY")
            }}
            defaultCalendarValue={dashboardFilter.length > 0 && [moment(dashboardFilter[0]).format("DD MMM YYYY"), moment(dashboardFilter[1]).format("DD MMM YYYY")]}
            onChange={(e) => handleDashboardFilter(e)}
            placeholder='Select Date Range'
            showOneCalendar
            cleanable={false}
            character='-'
            caretAs={DateRangeOutlinedIcon}
            showMeridian
            onOpen={handleOpen}  {/* Add onOpen handler */}
        />
    );
};

export default DashboardDateRangePicker;