DatePicker 不能够重置日期,重置日期不生效

[JslinSir]

Version of antd-mobile

5.28.1

Operating system and its version

iOS, Android

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

重置选中日期，不生效

/**
 * 日期选择组件
 */

import React, { useState, useImperativeHandle, useCallback, useEffect, useRef } from 'react';
import { DatePicker, Tabs } from 'antd-mobile'
import dayjs from 'dayjs';

import './index.css'


const dateEnum: any = {
    year: '年',
    month: '月',
    day: '日',
}


interface IProps {
    rangeDate?: Array<Date>;
    defaultValue?: Date;
    onConfirm?: (value: any) => void;
}


export default React.forwardRef((props: IProps, ref) => {
    const { defaultValue = new Date(), rangeDate = [new Date(), new Date()], onConfirm } = props
    const [visible, setVisible] = useState(false);
    const [type, setType] = useState('month')
    const [curent, setCurent] = useState(0)
    const [curentVal, setCurentVal] = useState<Date>(type === 'month' ? new Date() : rangeDate[curent])
    const rangeDateRef = useRef<any>(rangeDate)

    useImperativeHandle(ref, () => (
        {
            show: () => {
                setVisible(true)
            },
    
        }
    ))




    useEffect(() => {
        if (type === 'range') {
            rangeDateRef.current[curent] = curentVal
        }

    }, [type, curent, curentVal])




    const handleConfirm = useCallback(() => {
        typeof onConfirm === 'function' && onConfirm(type === 'month' ? curentVal : rangeDateRef.current)
        rangeDateRef.current = [new Date(), new Date()]
    }, [curentVal, type])


    const handleSelect = useCallback((value: any) => {
        setCurentVal(value)
    }, [])



    /**
     * 格式化日期
     */
    const formateDate = useCallback(() => {
        return dayjs(curentVal).format('YYYY.MM.DD')
    }, [curentVal])

    /**
     * 重置
     */
    const handleReset = useCallback(() => {
        setCurentVal(new Date())
        rangeDateRef.current = [new Date(), new Date()]
    }, [])

    const RnderTab = () => {
        return (
            <Tabs activeLineMode="fixed" defaultActiveKey={type} onChange={(key) => setType(key)}>
                <Tabs.Tab title='月份选择' key='month' />
                <Tabs.Tab title='自定义时间' key='range' />
            </Tabs>)
    }

    const RnderRange = () => {
        return (
            <>
                {
                    type === 'range' ?
                        <div className='flex flex-row items-center justify-center text-[36px] text-black bg-white absolute top-[140px] left-0 w-screen z-[2]'>
                            {
                                ['开始日期', '结束日期'].map((item, index) => <div key={index} className='flex flex-col flex-1 items-center justify-center' onClick={() => setCurent(index)}>
                                    <span className='text-[30px] text-quote'>{item}</span>
                                    <span className={`${curent === index ? 'active' : ''} mt-[10px]`}>{formateDate()}</span>
                                </div>)
                            }

                        </div>
                        :
                        null

                }
            </>
        )

    }

    const RnderFooter = () => {
        return (
            <div className='fixed bottom-0 left-0 flex flex-row items-center w-full h-[100px] bg-[#fafafa] z-[1010]'>
                <span>{curentVal.toDateString()}</span>
                <div className='flex flex-row items-center justify-center w-full  text-[32px] text-black' onClick={() => handleReset()}>重置</div>
                <div className='flex flex-row items-center justify-center w-full  text-[32px] text-[#ff2332]' onClick={() => handleConfirm()}>确定</div>
            </div>
        )
    }


    return (
        <div className={`_datePicker ${type}`} id="datePickerView">
            <DatePicker
                getContainer={document.getElementById('datePickerView')}
                precision={`${type === 'range' ? 'day' : 'month'}`}
                title={
                    <div className='flex flex-col relative'>
                        <div className='h-[100px flex flex-row items-center justify-between '>
                            <RnderTab />
                            <div onClick={() => setVisible(false)} className='text-[32px] text-[#ff2332]'>关闭</div>
                        </div>
                        <RnderRange />

                    </div>
                }
                renderLabel={(type, data) => <span>{`${data}${dateEnum[type]}`}</span>}
                cancelText={null}
                confirmText={null}
                visible={visible}
                onClose={() => {
                    setVisible(false)
                }}
                defaultValue={defaultValue}
                value={curentVal}
                max={new Date()}
                onSelect={handleSelect}
            />
            {visible && <RnderFooter />}

        </div>

    );
});

Relevant log output

No response

[zombieJ]

搞个 codesandbox 看看？

[JslinSir]

搞个 codesandbox 看看？
https://codesandbox.io/p/sandbox/demo-hflzyq?file=%2Fsrc%2Fcomponents%2Fdatepicker.tsx%3A88%2C49&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cly3tlzat00063b6m0xjqzzwg%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cly3tlzat00023b6ms11wmmbu%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cly3tlzat00033b6m0vb1a3ld%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cly3tlzat00053b6mumjls6l8%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cly3tlzat00023b6ms11wmmbu%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cly3tlzat00013b6my8a8s89o%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cly3tpkd200023b6mz86gzyca%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A88%252C%2522startColumn%2522%253A49%252C%2522endLineNumber%2522%253A88%252C%2522endColumn%2522%253A49%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fcomponents%252Fdatepicker.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cly3tlzat00023b6ms11wmmbu%2522%252C%2522activeTabId%2522%253A%2522cly3tpkd200023b6mz86gzyca%2522%257D%252C%2522cly3tlzat00053b6mumjls6l8%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cly3tlzat00043b6mhmz1f247%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cly3tlzat00053b6mumjls6l8%2522%252C%2522activeTabId%2522%253A%2522cly3tlzat00043b6mhmz1f247%2522%257D%252C%2522cly3tlzat00033b6m0vb1a3ld%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cly3tlzat00033b6m0vb1a3ld%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[JslinSir]

解决了，用 DatePickerView 自己封装就好了