taro/src/components/LimitPickers.tsx

import { PickerView, PickerViewColumn, View, Text } from "@tarojs/components";
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import './LimitPickers.scss'
// export default function Component(props: { limit: number, onChange: Function, onCancel: Function,isRealTime?:boolean,limitDay?:number,time?:number,ref?:any }) {
const Component = forwardRef((props: { limit: number, onChange: Function, onCancel: Function, isRealTime?: boolean, limitDay?: number, time?: number }, ref) => {
    const days: string[] = [];
    const today = new Date();
    const [values, setValues] = useState([props.limitDay ? props.limitDay - 1 : 6, today.getHours(), today.getMinutes()])


    useEffect(() => {
        if (props.time) {
            var date = new Date(props.time)
            setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(date), date.getHours(), date.getMinutes()])
        }
    }, [])
    // useEffect(() => {
    //     setValues([6, today.getHours(), today.getMinutes()])
    // }, [props.limit])


    for (let i = props.limitDay ? props.limitDay - 1 : 7; i >= 0; i--) {
        const date = new Date();
        date.setDate(today.getDate() - i);

        const month = date.getMonth() + 1;
        const day = date.getDate();
        const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];

        const formattedDate = `${month}月${day}日 ${weekday}`;
        if (i == 0) {
            days.push('今天 ');
        }
        else if (i == 1) {
            days.push('昨天 ');
        }
        else {
            days.push(formattedDate);
        }

    }

    const hours: number[] = [];


    for (let i = 0; i <= 23; i++) {
        hours.push(i);
    }

    const minutes: number[] = [];
    for (let i = 0; i <= 59; i++) {
        minutes.push(i);
    }



    function getTimestamp(dateTimeString: string): number {
        const timestamp = Date.parse(dateTimeString);
        return timestamp;
    }

    function getDaysDiff(date: Date): number {
        const today = new Date();
        today.setHours(0, 0, 0, 0);

        const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
        targetDate.setHours(0, 0, 0, 0);

        const timeDiff = today.getTime() - targetDate.getTime();
        const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

        return daysDiff;
    }

    function onPickerChange(e) {
        var list = e.detail.value

        const date = new Date();
        date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - list[0]));
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();

        const time = `${year}-${expandZero(month)}-${expandZero(day)}T${expandZero(hours[list[1]])}:${expandZero(minutes[list[2]])}:00`;
        if (getTimestamp(time) > today.getTime()) {
            setValues([list[0], today.getHours(), today.getMinutes()])
        }
        else {
            var limitDate = new Date(props.limit)

            // const date = new Date();
            // date.setDate(today.getDate() - (6 - list[0]));
            // const year = date.getFullYear();
            // const month = date.getMonth() + 1;
            // const day = date.getDate();
            // debugger
            // const time = `${year}-${expandZero(month)}-${expandZero(day)}T${expandZero(hours[list[1]])}:${expandZero(minutes[list[2]])}:59`;
            if (getTimestamp(time) < props.limit) {
                // console.log(6 - getDaysDiff(limitDate))
                setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(limitDate), limitDate.getHours(), limitDate.getMinutes()])
                return
            }

            setValues(e.detail.value)
        }

    }

    function expandZero(num: number): string {
        return num < 10 ? `0${num}` : `${num}`;
    }

    function cancel() {
        props.onCancel()
    }

    // function confirm() {
    //     var date = new Date();
    //     if (!props.isRealTime) {
    //         date = new Date(global.set_time);
    //     }

    //     date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
    //     date.setHours(values[1])
    //     date.setMinutes(values[2])
    //     props.onChange(date.getTime())
    // }

    function getConfirmData(){
        var date = new Date();
        if (!props.isRealTime) {
            date = new Date(global.set_time);
        }

        date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
        date.setHours(values[1])
        date.setMinutes(values[2])
        return date.getTime()
    }

    useImperativeHandle(ref, () => ({
        getConfirmData:getConfirmData
    }));



    return <View style={{ backgroundColor: 'transparent', position: 'relative' }}>
        <PickerView value={values}
            className="picker"
            maskClass="picker-mask"
            onChange={onPickerChange}
            immediateChange={true}
            indicatorStyle='height: 50px;'>
            <PickerViewColumn style='flex:0 0 45%'>
                {days.map(item => {
                    return (
                        <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}</View>
                    );
                })}
            </PickerViewColumn>
            <PickerViewColumn>
                {hours.map(item => {
                    return (
                        <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item < 10 ? `0${item}` : item}</View>
                    );
                })}
            </PickerViewColumn>
            <PickerViewColumn>
                {minutes.map(item => {
                    return (
                        <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item < 10 ? `0${item}` : item}</View>
                    );
                })}
            </PickerViewColumn>
        </PickerView>

        <View style={{
            position: 'absolute', width: '20%', height: 50, backgroundColor: 'transparent', left: '62.5%', top: 125,
            display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
            <Text style={{ color: '#000', fontSize: 16, fontWeight: 'bold' }}>:</Text>
        </View>
    </View>
})

export default Component;