mint-ui 日期控件 mt-datetime-picker

最新推荐文章于 2025-08-24 15:14:50 发布

原创最新推荐文章于 2025-08-24 15:14:50 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #mint

本文档展示了如何在Vue.js中创建一个只能选择年月的输入框，并设置初始值。通过修改样式使得用户只能看到年月选项，同时解决部分手机不显示数字的问题。利用`el-input`和`mt-datetime-picker`组件，配合自定义样式`.yearMonth`来限制选择范围，并通过`v-model`和`@confirm`事件处理日期选择。此外，还提供了一种处理某些手机不显示数字的通用解决方案，即调整`.picker-items`的宽度为100%。

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

效果图如下
在这里插入图片描述

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


// 这是方法---没太大用，只是用来格式化展示的数据
// 打开日期选择器
// self.pickerDate   如果这个数值给他now Date()，日期会显示在当前日期，不写startDate，起始日期不变还是2011开始
    openPicker() {
      let self = this;
      self.pickerDate = self.form.checkDate
      self.$refs['picker'].open();
    }
    ,
    // 日期选择器-确认
    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;
}