如何让Rsuite DateRangePicker打开时默认显示结束日期日历视图？

要实现打开选择器时默认显示结束日期的日历视图，你需要调整defaultCalendarValue属性的使用方式，同时注意该属性的取值要求：

• defaultCalendarValue需要传入Date/moment对象数组，而非格式化后的字符串，你当前代码里传入的是格式化后的日期字符串，会导致组件无法正确识别。
• 要默认显示结束日期的日历，只需将defaultCalendarValue数组的第二个元素设置为目标结束日期对象，第一个元素可设为null或起始日期（按需选择）。

修改后的组件代码如下：

<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：传入moment对象数组，聚焦结束日期视图
    defaultCalendarValue={dashboardFilter.length > 0 ? [null, moment(dashboardFilter[1])] : []}
    onChange={(e) => handleDashboardFilter(e)}
    placeholder='Select Date Range'
    showOneCalendar
    cleanable={false}
    character='-'
    caretAs={DateRangeOutlinedIcon}
    showMeridian
/>

关键说明 #

• 若dashboardFilter已有选中的日期范围，defaultCalendarValue设为[null, moment(dashboardFilter[1])]，组件打开时会自动聚焦到结束日期的日历视图。
• 若没有选中值，可根据业务需求设置默认结束日期（比如[null, getPreviousDay(new Date())]），或者留空数组。

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