CODEWITHSUNDEEP
reactjsdaterangepickerrsuite
Karan
Karan

Reputation: 3

I want to open End date calendar view on Rsuite DateRangePicker

i am using rusite DateRangePicker, i just want to open end_date calendar view while opeing the picker.

 <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
/>

I want to open end_date calendar view while opeing the picker.

DateRangePicker

Upvotes: 0

Views: 109

Answers (1)

Furkan &#214;zt&#252;rk
Furkan &#214;zt&#252;rk

Reputation: 544

To open the end date calendar view by default in rsuite's DateRangePicker, you can use a ref to control the component programmatically. You can focus the end date calendar when the picker is opened by setting up an onOpen handler.

  1. Add a ref to the DateRangePicker.
  2. Implement an onOpen handler to focus the end date calendar.
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;

Upvotes: 0

Related Questions