需要像 uber timepicker 一样在 reactjs 中制作 timepicker 并且现在想要下拉列表中的选项

Question

{val.getDate() === +todayDate ? (
                <TimePicker
                  className="carDetailOption"
                  value={val}
                  onChange={(date) => setVal(date)}
                  minTime={new Date(Math.round(date.getTime() / ms) * ms)}
                  // minTime={
                  //   showMinTime
                  //     ? ""
                  //     : new Date(Math.round(date.getTime() / ms) * ms)
                  // }
                />
              ) : (
                <TimePicker
                  className="carDetailOption"
                  value={val}
                  onChange={(date) => setVal(date)}
                  // minTime={new Date(Math.round(date.getTime() / ms) * ms)}
                  minTime={
                    showMinTime
                      ? ""
                      : new Date(Math.round(date.getTime() / ms) * ms)
                  }
                />
              )}

上面是我的代码，我想在 Timepicker 下拉列表中添加 Now 选项，我正在使用这个库https://v10.baseweb.design/components/time-picker/

Answer 1

使用

override

道具：

import { TimePicker } from 'baseui/timepicker';

// ...

<TimePicker
  value={val}
  onChange={(date) => setVal(date)}
  minTime={new Date(Math.round(date.getTime() / ms) * ms)}
  maxTime={new Date()}
  overrides={{
    Select: {
      props: {
        options: [
          { label: 'Now', id: 'now', value: new Date() },
          ...Array.from({ length: 24 }, (_, i) => ({
            label: `${i.toString().padStart(2, '0')}:00`,
            id: i,
            value: new Date(0, 0, 0, i),
          })),
        ],
      },
    },
  }}
/>