mint-ui 日期控件

文章目录

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


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

效果图如下
mint-ui 日期控件_第1张图片

<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% }

你可能感兴趣的:(vue.js)