antd mobile 实现时间日期选择

antd mobile提供了一个DatePicker组件，可以用于选择日期。如果需要选择时间，可以在DatePicker组件内部嵌套一个Popup组件，再在Popup内部放置一个TimePicker组件，这样就可以同时选择日期和时间了。

以下是一个示例代码：

import { DatePicker, List, Popup, TimePicker } from 'antd-mobile';
import React, { useState } from 'react';

const DateTimePicker = ({ value, onChange }) => {
  const [visible, setVisible] = useState(false);
  const [date, setDate] = useState(value || new Date());

  const handleOk = () => {
    onChange(date);
    setVisible(false);
  };

  const handleCancel = () => setVisible(false);

  const handleDateChange = (date) => setDate(date);

  return (
    <div>
      <DatePicker
        value={date}
        onChange={handleDateChange}
        mode="date"
        extra="请选择日期"
        onOk={() => setVisible(true)}
      >
        <List.Item arrow="horizontal">日期</List.Item>
      </DatePicker>
      <Popup
        visible={visible}
        onClose={handleCancel}
        animationType="slide-up"
        maskClosable
        destroyOnClose
      >
        <List>
          <List.Item>
            <TimePicker
              value={date}
              onChange={handleDateChange}
              minuteStep={5}
              mode="time"
            />
          </List.Item>
          <List.Item>
            <div
              style={{
                display: 'flex',
                justifyContent: 'flex-end',
                alignItems: 'center',
              }}
            >
              <span
                style={{ marginRight: '16px' }}
                onClick={handleCancel}
              >
                取消
              </span>
              <span onClick={handleOk}>确定</span>
            </div>
          </List.Item>
        </List>
      </Popup>
    </div>
  );
};

export default DateTimePicker;

使用时只需要传入value和onChange两个props即可，value是当前选中的日期时间，onChange是选中日期时间后的回调函数。