移动端react react-mobile-datepicker 日期范围选择

Question

问题遇到的现象和发生背景

现想写一个移动端的日期范围选择器，日期只到天，例如： 2022-09-01~2022-10-01

用代码块功能插入代码，请勿粘贴截图

我的解答思路和尝试过的方法

目前写好后的效果是

但是只能到月份，而且点击确定，拿不到选择的日期填进去

我想要达到的结果

Answer 1

可用组件处理
import {Calendar } from 'antd-mobile';
inpValu:'', //日期回填参数
getModalStatus:false, //控制日期组件的显示和隐藏
startTime: dayjs().subtract(0, 'day').toDate(), // 开始时间
endTime: '', // 结束时间

/**
     * 点击筛选日期
     */
     openDate = ()=>{
      this.setState({
        getModalStatus:true
       })  
   }
   
   /**
    * 关闭筛选日期模态框
    */
   close= ()=>{

       this.setState({
        getModalStatus:false
       })  

   }
/**设置时间 */
  setTime(val){
    this.setState({startTime:val[0],endTime: val[1]});
  }
  /**确定时关闭日期选择页面 */
  setVal =(val) =>{
    this.setState({startTime:val[0],endTime: val[1]});
    var st = this.dateFormat(this.state.startTime);
    var et = this.dateFormat(this.state.endTime);
    var dateTime = st + '~ ' + et;
    console.log('开始时间：'+st);
    console.log('结束时间：'+et);
    console.log(st + '~ ' + et);
    if(!this.isNull(st) && !this.isNull(et)){
    this.close();
    }
    this.setState({inpValu:dateTime});
  }
    /**
     * 日期格式化
     */
    dateFormat(date){
      if(date){
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() < 10 ? '0' + date.getDate() + ' ':date.getDate() + ' ';
        return Y+M+D;
      }else{
        return '';
      }
    }
在render里面
<div
              style={{ display: this.state.getModalStatus ? "block" : "none" }}
            >
              <Calendar
                selectionMode="range"
                defaultValue={defaultRange}
                onChange={(val) => {
                  this.setTime(val);
                }}
              />
              <Button className='cancel' size='small' onClick={this.close}>
                取消
              </Button>
              <Button className='sure' size='small' onClick={this.setVal}>
                确定
              </Button>
          </div>