咨询：图中使用的UI组件是什么？如何同时布局显示日期时间？

嘿，我来帮你拆解这个UI组件和对应的布局实现思路哦～

这是弹窗式日期时间选择器（Modal DateTime Picker），属于表单类交互组件的一种，它是两个核心子组件的组合：

• 左侧是日历面板（Calendar View）：用于直观选择年、月、日，支持按月份切换，是日期选择的核心交互区
• 右侧是滚轮式时间选择器（Wheel Time Picker）：通过滚轮滚动选择时、分（部分还支持秒或AM/PM时间段），这种交互在移动端场景中很常见，操作流畅且直观

核心是采用左右分栏布局，把日期选择区和时间选择区放在同一容器内，再配合弹窗容器实现底部/居中悬浮的效果。下面给几个不同技术场景的实现示例：

1. Web端基础HTML/CSS实现 #

用Flex布局就能轻松实现左右分栏，代码示例如下：

<!-- 弹窗容器 -->
<div class="datetime-modal">
  <!-- 日期时间选择容器 -->
  <div class="datetime-container">
    <!-- 日历面板区 -->
    <div class="calendar-section">
      <div class="calendar-header">2024年6月</div>
      <div class="calendar-grid">
        <div class="date-cell">1</div>
        <div class="date-cell active">15</div>
        <!-- 省略更多日期格子 -->
      </div>
    </div>
    <!-- 时间选择区 -->
    <div class="time-section">
      <div class="time-wheel">
        <div class="wheel-item">08</div>
        <div class="wheel-item active">14</div>
        <div class="wheel-item">15</div>
      </div>
      <span class="time-separator">:</span>
      <div class="time-wheel">
        <div class="wheel-item">20</div>
        <div class="wheel-item active">30</div>
        <div class="wheel-item">40</div>
      </div>
    </div>
  </div>
  <!-- 底部操作按钮 -->
  <div class="modal-actions">
    <button class="btn-cancel">取消</button>
    <button class="btn-confirm">确认</button>
  </div>
</div>

对应的核心CSS：

.datetime-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;
}

.datetime-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.calendar-section, .time-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-section {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.time-wheel {
  height: 120px;
  overflow-y: auto;
  text-align: center;
}

.wheel-item.active {
  font-weight: bold;
  color: #2196F3;
}

2. React框架（借助第三方组件库） #

如果用现成的组件库，比如Ant Design，可以快速实现这种布局：

import { DatePicker } from 'antd';
import 'antd/dist/reset.css';

function DateTimePickerDemo() {
  return (
    <DatePicker 
      showTime={{ format: 'HH:mm' }}
      format="YYYY-MM-DD HH:mm"
      placeholder="选择日期时间"
      popupStyle={{ width: 500 }}
    />
  );
}

组件内部会自动采用左右分栏布局，把日历和时间选择器整合在同一弹窗中，无需手动写复杂布局。

3. 移动端Android实现 #

Android中可以使用Material组件库的DateTimePicker，默认就是左右分栏的样式：

val dateTimePicker = MaterialDateTimePicker.Builder.dateTimePicker()
    .setTitleText("选择日期时间")
    .setTheme(R.style.Theme_Material3_Dialog)
    .build()

dateTimePicker.show(supportFragmentManager, "DateTimePicker")

内容的提问来源于stack exchange，提问作者Sirasit T