styling reactdatePicker startMonth, endMonth and withinRange

Question

Please I am working on a figma design that include different styling for startMonth, endMonth and withinRange. I am using reactdatepicker. here is the screenshot of what I want to implement.

I use customrenderMonth but the styling does not change from the default styling for reactdatepicker. this is the renderMonth

const renderMonth = (props) => {
        const { monthDate } = props;
        const year = monthDate.getFullYear();
        const month = monthDate.getMonth();

        const isFirstMonth = startMonthDate && startMonthDate.getFullYear() === year && startMonthDate.getMonth() === month;
        const isLastMonth = endMonthDate && endMonthDate.getFullYear() === year && endMonthDate.getMonth() === month;
        const isWithinRange = startMonthDate && endMonthDate && startMonthDate < monthDate && monthDate < endMonthDate;

        let className = '';
        if (isFirstMonth) {
            className = 'first-month';
        } else if (isLastMonth) {
            className = 'last-month';
        } else if (isWithinRange) {
            className = 'within-range';
        }

        return (
            <div className={`custom-month ${className}`}>
                {props.children}
            </div>
        );
    };

Date component

<DatePicker
                className="custom-input-style"
                selectsRange={true}
                startDate={startMonthDate}
                endDate={endMonthDate}
                onChange={onChangeDateHandler}
                dateFormat="MMM"
                renderMonthContents={renderMonth}
                showMonthYearPicker
                shouldCloseOnSelect={false}
                customInput={<ExampleCustomInput />}
                inline
            >
                <div className=''>
                    <div className='buttonAction67' >
                        <span onClick={confirmDate}>Confirm</span>
                        <span onClick={cancelMonthDate}>Cancel</span>
                    </div>
                    {dateError && (<p className='error'>please choose end date</p>)}
                </div>

            </DatePicker>

I will greatly appreciate your assistant

styling reactdatePicker startMonth, endMonth and withinRange

0 Answers0