need to make timepicker in reactjs like uber timepicker and want now option in dropdown

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)
                  }
                />
              )}

Above is my code and I want to add Now option in Timepicker Dropdown and I am using this library https://v10.baseweb.design/components/time-picker/

Answer 1

Use the override prop :

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),
          })),
        ],
      },
    },
  }}
/>