vue mint-ui date-picker只显示年月，并支持一个页面里有多个

   mint-ui是饿了么的针对于vue移动端开发的ui组件，但是在用的时候有一些大大小小的问题，我们开发的项目要列表里点击时间弹出日期控件(如图) ，但是默认的日期控件没有只显示年月的样式。
  在试过很多方法后，发现只有用 jquery 修改css样式的方法有用，现将关键代码贴出，供大家使用：

1.先将jquery导入，如果导入失败要先在webstorm中下载相关库

 import $ from 'jquery/dist/jquery'

2.在vue的template中插入date-picker

<mt-datetime-picker
      ref="picker"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      :start-date="startData"
      @confirm="handleM"
    >

3.点击打开时间控件的方法

   open () {
        let el = $('.picker-slot.picker-slot-center')[4 * (this.index + 1) - 1]
        // console.log(el.length)
        el.style.display = 'none'
        this.$refs.picker.open()
      },

关键代码就是
let el = $(’.picker-slot.picker-slot-center’)[4 * (this.index + 1) - 1]这一句，可以支持一页面里有多个列表时间控件，网上有的方法会出现一个页面里的第一个列表没问题，但是从第二个开始就有问题，核心思想就是用jquery找到“日”那一列，并将它隐藏。
4.完整代码

<template>
  <div>
    <div class="divBtWrap"><p>具体工作事项</p><a  @click="handleDelete"></a></div>
    <div>
      <div class="registerTabDiv arrow"><label>项目：</label>
        <div class="registerNrDiv" @click="proPopupVisible = true">{{sTValue}}</div>
      </div>
      <div class="registerTabDiv arrow"><label>开始月份：</label>
        <div class="registerNrDiv" @click="open('start')">{{startMonth}}</div>
      </div>
      <div class="registerTabDiv arrow"><label>结束月份：</label>
        <div class="registerNrDiv" @click="open('end')">{{endMonth}}</div>
      </div>
      <div class="registerTabDiv "><label>用量：</label>
        <div class="registerNrDiv"><input type="number" oninput="if(value.length>10)value=value.slice(0,10)"
                                          placeholder="请输入用量" v-model="nums"></div>
      </div>
      <div class="registerTabDiv "><label>单价：</label>
        <!--  <input type="number" oninput="if(value.length>10)value=value.slice(0,10)" placeholder="请输入单价" v-model="price">-->
          <div class="registerNrDiv"><currency-input @isinput="priceClick" v-model="price"></currency-input></div>
      </div>
      <div class="registerTabDiv "><label>合计(元)：</label>
        <!--        <div class="registerNrDiv" @click="sum">{{getCurreycy}}</div>-->
        <div class="registerNrDiv" >{{sum}}</div>
      </div>

    </div>


    <mt-popup v-model="proPopupVisible" position="bottom" class="mint-datetime">
      <mt-picker
        ref="proPicker"
        :slots="proSlot"
        :closeOnClickModal="true"
        :show-toolbar="true"
        value-key="codename"
        :visible-item-count="5">
        <span class="mint-datetime-action mint-datetime-cancel" @click="sTcancel">取消</span>
        <span class="mint-datetime-action mint-datetime-confirm" @click="sTconfirm">确定</span>
      </mt-picker>
    </mt-popup>

    <mt-datetime-picker
      ref="picker"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      :start-date="startData"
      @confirm="handleM"
    >
    </mt-datetime-picker>

  </div>
</template>


<script>
  import {Toast} from 'mint-ui'
  import $ from 'jquery/dist/jquery'
  import {currency} from '../../utils/currency'
  import Vue from 'vue'
  import qs from 'qs'
  //引入子组件
  import CurrencyInput from '../declare/CurrencyInput'
  import {getSecNetParam} from '../../utils/ReqUtils'
  import global_ from '../../utils/Global'//引用模块进来
  import {getBaseDataStr, getOverTimeStr, getBillSaveStr} from '../../utils/Utils'
  export default {
    name: 'WorkmattersItem',
    components: {CurrencyInput},

    props: {
      index: 0,
      item:Object
    },
    data () {
      return {
        sTValue: '请选择报销类型',
        sTCode: null,
        dateVal: '', // 默认是当前日期

        startMonth: '请选择开始月份',
        endMonth: '请选择结束月份',

        proPopupVisible: false,
        proSlot: [{
          flex: 1,
          // values: ['水费', '电费', '天然气费', '取暖费'],
          values: [],
          className: 'slot1',
          textAlign: 'center'
        }],
        // startData: new Date((parseInt(new Date().getFullYear())-1)+'-'+(parseInt(new Date().getMonth())+1)+'-'+new Date().getDate()),
        startData: new Date((parseInt(new Date().getFullYear())-1)+'-'+(parseInt(new Date().getMonth())+1)),
        endDate: new Date('2019-12'),
        pickerVisible: new Date(),

        dateType: '',//区分开始月份、结束月份

        nums: null,
        price: '',
        moneySum: 0,

      }

    },

    // filters: {
    //   numFilter (value) {
    //     // 截取当前数据到小数点后两位
    //     let realVal = parseFloat(value).toFixed(2)
    //     return realVal
    //   }
    // },


    computed: {
      sum(){
        this.moneySum = this.nums * this.price
        this.moneySum= parseFloat(this.moneySum).toFixed(2)
        return  this.moneySum
      },
      // getCurreycy () {
      //   return currency(this.moneySum)
      // }
      // sum () {
      //   let he = this.nums * this.price
      //   if (he > 0 && this.price > 0 && this.nums > 0
      //     && this.startMonth != '请选择开始月份'
      //     && this.endMonth != '请选择结束月份' && this.sTCode !=null) {
      //     this.$emit('incre', [this.index, he, this.price, this.nums, this.startMonth,
      //       this.endMonth, this.sTCode])
      //   }
      //   return currency(he)
      //
      // }
    },

    watch: {
      sum(val, oldVal) {
        console.log("inputVal = " + val + " , oldValue = " + oldVal)
        this.sendToParent()
      },

      // price (newvalue, oldvalue) {
      //
      //     let newvalue_ = (newvalue.indexOf('.00') > 0) ? newvalue.replace('.00', '') : newvalue //禁止ie8,9自动添加.00的小数点
      //
      //     if ((isNaN(parseFloat(newvalue_.replace(/,/ig, ''))))) { //如果当前输入的不是数字就停止执行
      //       this.price = ''  //防止不是数字是input出现NaN提示
      //       return false
      //     }
      //
      //     if (/\./i.test(newvalue_)) { //判断处理含有.的情况下
      //
      //       if (/\.\d\d\d$/.test(newvalue_)) {
      //         this.price = oldvalue //限制只能输入2位小数点
      //       } else {
      //         this.price = newvalue_.replace(/[^\d\.\,]/ig, '') //开始输入小数点之后，只能输入数字
      //       }
      //
      //     }
      //     // else{
      //     //   this.declareMoney=((parseFloat(newvalue_.replace(/,/ig,'')).toLocaleString()).toString()).replace('.00' ,'');
      //     // }
      //
      //   },

    },

    created () {

      this.initData()

      if (global_.secondNet) {
        this.$axios({
          url: 'http/GA102Comm',
          method: 'post',
          //发送格式为json
          data: getSecNetParam(this.$store.state.secnetparams.bwlyipdz, this.$store.state.secnetparams.bwlydkh,
            this.$store.state.secnetparams.fwqqz_zcxx, 'S00111010200000047018', 'FUN001', getBaseDataStr(3),
            this.$store.state.secnetparams.xxczry_xm, this.$store.state.secnetparams.xxczry_gmsfhm, this.$store.state.secnetparams.xxczry_gajgjgdm,
            this.$store.state.secnetparams.fwqqsb_bh, this.$store.state.secnetparams.fwqq_sjsjlx, this.$store.state.secnetparams.yysbs)

        }).then((response) => {
          let data = response.data.FWTG_NR.data
          this.proSlot[0].values = data//传入你想要传达的位置
          // console.log(JSON.stringify(data))
        }).catch((error) => {
          console.log(error)
        })
      }else{
      this.$axios.post('xcbx/mobile/getBaseData', qs.stringify({
        // 此参数就是写到请求体中的参数
        type: 3
      })).then((response) => {
        let data = response.data.data
        this.proSlot[0].values = data//传入你想要传达的位置
          // console.log(JSON.stringify(data))
      }).catch((error) => {
        console.log(error)
      })
      }
    },
    methods: {
      initData(){
        this.sTCode=this.item.itemid
        this.sTValue=this.panDuanBaoXiaoType(this.item.itemid)
        if(!_.isEmpty(this.item.start)){
          this.startMonth=this.item.start
        }
        if(!_.isEmpty(this.item.end)){
          this.endMonth=this.item.end
        }
        if(!_.isEmpty(this.item.usingcount)){
          this.nums=this.item.usingcount
        }

        if(!_.isEmpty(this.item.unitprice)){
         this. price=this.item.unitprice
        }
      },

      // 判断是什么报销类型
      panDuanBaoXiaoType (itemid) {
        let accStr = ''
        switch (itemid) {
          case '1': {
            accStr = '水费'
            break
          }
          case '2': {
            accStr = '电费'
            break
          }

          case '3': {
            accStr = '天然气费'
            break
          }
          case '4': {
            accStr = '取暖费'
            break
          }
          default:{
            accStr = '请选择报销类型'
            break
          }

        }
        return accStr
      },

      priceClick(value){
        this.price = value;
      },

      sendToParent () {
        // 直接把数据发送给父组件
        this.$emit('incre', [this.index, this.sTCode,this.sTValue, this.startMonth,
          this.endMonth, this.nums, this.price,this.moneySum,this.item.id])
      },

      // handleInput (e) {
      //   // 通过正则过滤小数点后两位
      //   e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
      //
      // },

      open (type) {
        this.dateType = type
        let el = $('.picker-slot.picker-slot-center')[4 * (this.index + 1) - 1]
        // console.log(el.length)
        el.style.display = 'none'
        this.$refs.picker.open()
      },

      //项目选择
      sTconfirm () {
        this.proPopupVisible = false
        let obj = this.$refs.proPicker.getValues()[0]
        this.sTValue = obj.codename
        this.sTCode = obj.code
        // console.log(this.sTCode)
        this.sendToParent()
      },

      sTcancel () {
        this.proPopupVisible = false
      },

      //日期选择
      handleM (e) {
        if (this.dateType == 'start') {
          this.startMonth = e.getFullYear() + '-' + (parseInt(e.getMonth()) + 1)
          // console.info(this.startMonth)
        } else if (this.dateType == 'end') {
          this.endMonth = e.getFullYear() + '-' + (parseInt(e.getMonth()) + 1)
          // console.info(this.endMonth)
        }
        this.sendToParent()

      },
      handleDelete () {
        // alert(this.index)
        // this.$emit('delete', this.index)
        this.$emit('delete', this.item.id)
      }

    }

  }
</script>

<style scoped>

</style>