reactjs - Hur sätter man en rensa-knapp inuti kalenderfönstret i antd datepicker-komponenten?

Jag använder andt datepicker-komponent. I mitt fall täcker rensningsikonen kalenderknappen.

Jag behöver ta bort rensa-knappen och tillåta manuell rensning. (Men, såvitt jag vet, kan det för närvarande inte göras). Eller jag behöver flytta rensa-knappen inuti kalendermodalen, till exempel bredvid Idag-knappen. Är det möjligt?

Jag försökte sätta värdet false på allowClear-egenskapen. Det tar bort rensningsknappen. Men datumväljaren kan inte rensas manuellt.

Svar #1

Du kan använda renderExtraFooter för att anpassa sidfoten. Just nu finns det inget alternativ för att lägga till mer innehåll med Today-knappen. Men du kan dölja den nuvarande Today-knappen och rendera din egen anpassade sidfot. Jag renderade en Today- och Clear-knapp i datepicker-sidfoten och satte showNow till false för att dölja den befintliga knappen. Du kan också kolla på Extra Footer-exemplet.

Här är den kompletta koden

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;

Svar #2

du kan titta igenom dokumentationen här för mer information: https://ant.design/components/date-picker#common-api

Här är ett exempel:

    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
                    // }
                />
            </>
        );

Du kan kolla hur det ser ut som standard: Exempel