taro/src/components/input/TimePickers.tsx

import { Picker, Text, PickerView, PickerViewColumn, View } from "@tarojs/components";

import { useEffect, useState } from "react";

export default function Component(props: { time: string, content: string, change: Function, isPickerView?: boolean }) {
    var [hour, minute] = props.time.split(':').map(x => parseInt(x))
    const m = Math.round(minute / 5) * 5;
    const v = [hour, m / 5];

    const [dt, setDt] = useState(v)

    useEffect(() => {
        var [hour, minute] = props.time.split(':').map(x => parseInt(x))
        const m = Math.round(minute / 5) * 5;
        const v = [hour, m / 5];
        setDt(v)
    }, [props.time])


    const hours: number[] = [];


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

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

    function onPickerChange(e) {

        const val = e.detail.value
        setDt(val)
        var strHour = hours[val[0]] < 10 ? '0' + hours[val[0]] : hours[val[0]]
        var strMinute = minutes[val[1]] < 10 ? '0' + minutes[val[1]] : minutes[val[1]]
        props.change(strHour + ':' + strMinute)
    }

    if (props.isPickerView) {
        return <PickerView
            value={dt}
            onChange={onPickerChange}
            immediateChange={true}
            indicatorStyle='height: 50px;' style='width: 100%; height: 100px;'>
            <PickerViewColumn>
                {hours.map(item => {
                    return (
                        <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}</View>
                    );
                })}
            </PickerViewColumn>
            <PickerViewColumn>
                {minutes.map(item => {
                    return (
                        <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item}</View>
                    );
                })}
            </PickerViewColumn>
        </PickerView>
    }


    return <Picker mode="multiSelector" range={[hours, minutes]} onChange={onPickerChange} value={dt}>
        <Text>{props.content}</Text>
    </Picker>
}