以前从来不写文章,今天遇到的问题,浪费了很多时间,决定留个记录,也希望能帮助到更多的人!

需求是:选择日期组件有年,月,周,季,自定义.偏偏在elementUl的DatePicker 日期选择器周组件的时候一直获取不到对应的年和周,总是有偏差!

elementUl的DatePicker 日期选择器周组件如图:

官网代码如图:

 

 

 但是官网的value没有打印出来值,只给了一个value1.
 

      <el-form-item label="请选择周">
        <el-date-picker
          id="week-data"
          ref="weekValue"
          @change="dataChange"
          format="yyyy 第 WW 周"
          v-model="taskStatisticalForm.week"
          type="week"
          placeholder="选择周">
        </el-date-picker>
      </el-form-item>

dataChange方法打印出来的格式是:

  dataChange(e){
    console.log(e)//Mon Oct 17 2022 00:00:00 GMT+0800 (中国标准时间)
  }

方法一:
!!!!!!了解到这个组件有个bug:当type为week的时候,使用value-format会报错,可以使用moment.js 解决 ,附上官网链接:Moment.js 中文网

但是呢!我的负责人希望尽量能不安装就不安装,如果和我一样不能在项目随意安装组件插件的,可以接着往下看:

方法二:
我也尝试过计算周的方法:
原方法来自这位兄弟:JS实现当前日期是第几周_MaoXinya的博客-CSDN博客_js获取当前第几周但是,这些方法都会出现有时候+1的误差,但是有时候值又正常!
这还是不能满足我,最后还有一个方法:

 

方法三:

直接使用DOM节点操作,获取组件format的value值,这样,显示是多少就可以直接获得数据!这个方法是最快捷最简单的,但是在vue当中使用DOM节点操作不够规范,如果代码规范非常严格的,建议还是不要使用了哈哈哈

    <el-form-item label="请选择周">
        <el-date-picker
          id="week-data"  //重点在这里,一定要添加这个,然后使用document.getElementById获取值
          ref="weekRef" //这个ref是获取不到的
          @change="dataChange"
          format="yyyy 第 WW 周"
          v-model="taskStatisticalForm.week"
          type="week"
          placeholder="选择周">
        </el-date-picker>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" size="small" 
      @click="handleQuery(taskStatisticalForm)">统计</el-button>

handleQuery(e){
   let weekValue =  document.getElementById('week-data')
   console.log(weekValue.value)
   // ref的值是获取不到这个value的。所以还是只能用document.getElementById
}

 

Logo

前往低代码交流专区

更多推荐