文章目录

• 一、只能选择年月并且设置初始值
• 二、手机不显示数字

---

一、只能选择年月并且设置初始值

效果图如下

<el-form-item label="月份" prop="checkDate">
            <el-input placeholder='请选择月份'
                      v-model="form.checkDate"
                      suffix-icon="el-icon-arrow-down"
                      @click.native="openPicker()" readonly>
            </el-input>
          </el-form-item>
<mt-datetime-picker ref="picker"
                          class='yearMonth'   //这是关键，只选择年月
                          type="date"
                          v-model="pickerDate"
                          :start-date='startDate'   //这是设置初始值的
                          @confirm="onConfirmDate">
      </mt-datetime-picker>


// 这是方法---没太大用，只是用来格式化展示的数据
// 打开日期选择器
    openPicker() {
      let self = this;
      self.$refs['picker'].open();
      self.pickerDate = self.form.checkDate
    }
    ,
    // 日期选择器-确认
    onConfirmDate(date) {
      let self = this;
      let currentDate = new Date(date);
      self.form.checkDate = currentDate.format('yyyy-MM')
    }
 
 // 这是重点
/*只能输入年月*/
.yearMonth .picker-items .picker-slot-center:nth-child(3) {
  flex:0 0 0%!important;
  background-color:red;
}

/*只能输入年*/
.yearMonthE .picker-items .picker-slot-center:nth-child(3) {
  flex:0 0 0%!important;
  background-color:red;
}
.yearMonthE .picker-items .picker-slot-center:nth-child(2) {
  flex:0 0 0%!important;
  background-color:red;
}

二、手机不显示数字

有些手机会不显示数字，虽然我没遇到过，但是需求遇到了，这能怎么办呢，只能改呗。还好网友强大，一句话就解决了

.picker-items{ width:100% }