ReactJS实现类Uber时间选择器并添加Now选项需求

基于你提供的现有代码，结合Base Web v10 TimePicker的自定义能力，可以通过以下方式添加「Now」选项：

核心思路 #

利用Base Web TimePicker的overrides属性，自定义下拉菜单内容，在顶部添加「Now」选项，点击后将时间设置为当前取整后的时间，同时保留原有日期判断的minTime逻辑。

修改后的完整代码 #

// 定义「Now」选项的点击处理函数
const handleNowClick = () => {
  const now = new Date();
  // 沿用现有代码的时间取整逻辑
  const roundedNow = new Date(Math.round(now.getTime() / ms) * ms);
  setVal(roundedNow);
};

// 合并原有重复的TimePicker代码，简化逻辑
<TimePicker
  className="carDetailOption"
  value={val}
  onChange={(date) => setVal(date)}
  minTime={
    val.getDate() === +todayDate
      ? new Date(Math.round(date.getTime() / ms) * ms)
      : showMinTime
        ? ""
        : new Date(Math.round(date.getTime() / ms) * ms)
  }
  // 通过overrides自定义下拉菜单，添加「Now」选项
  overrides={{
    Dropdown: {
      component: ({ children, ...rest }) => (
        <div {...rest}>
          {/* 顶部添加「Now」选项 */}
          <div
            style={{
              padding: "8px 16px",
              cursor: "pointer",
              fontWeight: 500,
              borderBottom: "1px solid #eee"
            }}
            onClick={handleNowClick}
          >
            Now
          </div>
          {/* 保留原有的时间选择列表 */}
          {children}
        </div>
      )
    }
  }}
/>

关键说明 #

• 代码简化：将原有两个条件分支的TimePicker合并，通过一个条件判断统一处理minTime，减少冗余。
• 「Now」选项逻辑：点击「Now」时，按照现有代码的时间取整规则生成当前时间，并更新状态。
• 样式适配：基础样式模仿Uber的顶部选项效果，可根据需求调整padding、颜色、边框等细节。
• 原有逻辑保留：完全保留你原有的minTime判断逻辑，当天限制最小时间为当前取整时间，非当天根据showMinTime控制最小时间范围。

内容的提问来源于stack exchange，提问作者Hemendra Mehta