明殊 2022-09-23 14:46 采纳率: 100%
浏览 54
已结题

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

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

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

用代码块功能插入代码,请勿粘贴截图
我的解答思路和尝试过的方法

目前写好后的效果是

img


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

我想要达到的结果

img

  • 写回答

2条回答 默认 最新

  • 明殊 2022-10-20 15:18
    关注

    可用组件处理
    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月28日
  • 已采纳回答 10月20日
  • 创建了问题 9月23日

悬赏问题

  • ¥15 有没有人会打学生成绩管理系统呀
  • ¥15 在使用Fiddler和夜神模拟器抓包的时候一直出现443该怎么办啊QAQ搜了好几个笔记都没有解决
  • ¥15 3x7的二维数组A、B、C,A中的任意1个数组元素与B的任意1个数组元素、同时又与C的任意1个数组元素比较,把不同位置出现相同数的比较称为无意义,反之称为有意义,把有意义的比较打印输出。
  • ¥20 预测模型怎么处理原始数据(随机森林)
  • ¥20 请问discuz3.5如何实现插入ckplayer全能播放器功能呢?
  • ¥15 thingsboard代码编译出错误
  • ¥15 博途v18仿真报错怎么解决
  • ¥15 欧姆龙plc枕式包装机 ST编程
  • ¥15 为啥快手广告联盟的广告这么难出来
  • ¥15 k8s集群重启后,kubelet一直报systemctl restart kubelet.service "Failed to delete cgroup paths"