div模块 

<div className="choseDate"><div className="range"><input className='startTime' onClick={()=>{this.setState({startVisible:true})}} placeholder="请选择开始日期" value={this.state.startTime} /><DatePickertitle='时间选择'visible={this.state.startVisible}onClose={() => {this.setState({startVisible:false})}}precision='day'onConfirm={val1 => {this.startTimeOnConfirm(val1)}}labelRenderer={labelRenderer}/>~<input className='endTime' onClick={()=>{this.setState({endVisible:true})}} placeholder="请选择结束日期" value={this.state.endTime} /><DatePickertitle='时间选择'visible={this.state.endVisible}onClose={() => {this.setState({endVisible:false})}}precision='day'onConfirm={val2 => {this.endTimeOnConfirm(val2)}}labelRenderer={labelRenderer}/><CalendarOutline fontSize={26} color='white' style={{'margin-top':'5px'}}/></div></div>

 获取时间

    //设置开始时间startTimeOnConfirm(val1){this.setState({startTime:this.getDateTime(val1)})}//设置结束时间endTimeOnConfirm(val2){this.setState({endTime:this.getDateTime(val2)})}getDateTime = (date) => {if (!(date instanceof Date)) {Toast.show('不是日期时间')return null;}const y = date?.getFullYear()let m = date?.getMonth() + 1let d = date?.getDate()m = m > 9 ? m : '0' + md = d > 9 ? d :'0' + d;return y + '-' + m + '-' + d}render(){//处理日期时间显示的数据const labelRenderer = (type, data) => {switch (type) {case 'year':return data + '年'case 'month':return data + '月'case 'day':return data + '日'default:return data}}

 定义时间，日期选择默认不展示

    constructor(props) {super(props);this.state = { startTime: '', // 开始时间endTime: '', // 结束时间startVisible:false, //控制开始日期的显示和隐藏endVisible:false, //控制结束日期的显示和隐藏};}

react 引用的 

import React, { Component, createRef,useState } from 'react';
import { InfiniteScroll, NavBar, Toast,DatePicker } from 'antd-mobile';
import { CalendarOutline} from 'antd-mobile-icons'

效果图