taro/src/features/common/TimePicker.tsx

import PickerViews from "@/components/input/PickerViews";
import { PickerView, PickerViewColumn, View } from "@tarojs/components";

import { useEffect, useState } from "react";

export default function Component(props: { time: string, confirm: Function, cancel: Function, title?: string, color?: string }) {
    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: string[] = [];


    for (let i = 0; i <= 23; i++) {
        var h = i<10?'0'+i:i
        hours.push(h as any);
    }

    const minutes: string[] = [];
    for (let i = 0; i <= 11; i++) {
        var ms = i*5
        var m1 = ms<10?'0'+ms:ms+''
        minutes.push(m1 as any);
    }

    function onPickerChange(e) {
        var h = parseInt( hours[e[0]])
        var m = parseInt(minutes[e[1]])
        var strHour =h < 10 ? '0' + h : h
        var strMinute = m< 10 ? '0' + m : m
        props.confirm(strHour + ':' + strMinute)
    }

    return <PickerViews  themeColor={props.color} title={props.title} value={dt} showBtns={true} onChange={onPickerChange} items={[hours, minutes]} onCancel={() => { props.cancel() }} />
}