Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to put clear button inside calendar modal in antd datepicker component?

I am using andt datepicker component. In my case, the clear icon covers calendar button.

enter image description here

I need to remove the clear button and allow to clear manually. (but, as far as I know, currently it can not be done). Or I need to move the clear button inside calendar modal, for instance, next to "Today" button. Is it possible?

I tried to set false value to ‘allowClear’ property. It removes clear button. But, datepicker value can not be cleared manually

Tags:

2

Answers


  1. 0

    you can look over docs here for more information: https://ant.design/components/date-picker#common-api

    Here’s an example:

        const [date, setDate] = useState(null);
        const handleChange = (dateValue: any) => {
            setDate(dateValue);
        }
    
        return (
            <>
                <DatePicker
                    onChange={handleChange}
                    allowClear={true}
                    value={date}
                    // clearIcon={
                    //     // you can use every element here
                    // }
                />
            </>
        );

    You can check how it looks by default: Example

    Login or Signup to reply.
  2. 0

    You can use renderExtraFooter to customize the footer. Right now there’s no option to add more content with Today button. But you can hide the current Today button and render your custom footer. I rendered a Today and Clear button in datepicker footer and set showNow to false to hide the existing button. You can also check Extra Footer example.

    Here’s the complete code

    import { Button, DatePicker, Flex } from 'antd';
import dayjs, { type Dayjs } from 'dayjs';
import { useRef, useState } from 'react';

const App = () => {
    const [value, setValue] = useState<Dayjs | null>(null);
    const [open, setOpen] = useState(false);
    const ref = useRef(null);

    return (
        <div style={{ display: 'flex', columnGap: '1rem' }}>
            <DatePicker
                ref={ref}
                open={open}
                onOpenChange={setOpen}
                value={value}
                onChange={setValue}
                allowClear={false}
                showNow={false}
                renderExtraFooter={() => (
                    <Flex justify='space-between' style={{ paddingBlock: 7 }}>
                        <Button
                            size='small'
                            type='link'
                            onClick={() => {
                                setValue(dayjs());
                                // Value is not updated if we close the picker immediately
                                setTimeout(() => setOpen(false));
                            }}
                        >
                            Today
                        </Button>
                        <Button size='small' danger onClick={() => setValue(null)}>
                            Clear
                        </Button>
                    </Flex>
                )}
            />
        </div>
    );
};

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search