技术栈： iviewUI 版本4.7.0 vue 版本2.6.10

实现效果

时间选择器选择年份和月份之后 自动计算获取该月的天数赋值给下拉框 点击下拉框可以选择该月的日期

整体效果

选择年 如上图

选择月 如图

选择日 如图

具体代码

html部分代码

<FormItem label="数据所属年" prop="subordinateYear">
    <DatePicker
      placeholder="请选择"
      type="year"
      @on-change="changeYear"
      format="yyyy"
      :value="rulesModalForm.subordinateYear"
      ref="selectDatePicker"
    >
    </DatePicker>
</FormItem>

<FormItem label="数据所属月" prop="subordinateMonth">
    <DatePicker
      class="chooseMonth"
      placeholder="请选择"
      type="month"
      @on-change="changeMonth"
      format="MM"
      :value="rulesModalForm.subordinateMonth"
      ref="selectDatePicker"
    >
    </DatePicker>
</FormItem>

<FormItem label="数据所属日" prop="subordinateDay">
    <Select
      clearable
      @on-change="changeDay"
      v-model="rulesModalForm.subordinateDay"
    >
      <Option
        v-for="item in selectDay"
        :value="item.value"
        :key="item.value"
        >{{ item.label }}</Option
      >
    </Select>
</FormItem>

函数部分的代码

要点：根据年月来判断该月的日期的天数 平年和闰年；把日期的时间选择器改为下拉框展示

data() {
    return { 
        selectDay: [],//日期下拉框数据  
    };
},
methods: {
//月
    changeMonth(event){
      this.rulesModalForm.subordinateMonth = event
      if(this.rulesModalForm.subordinateYear&&this.rulesModalForm.subordinateMonth){
        this.selectDay = this.getDayData(this.rulesModalForm.subordinateYear,this.rulesModalForm.subordinateMonth)
      }
    },
//年
    changeYear(event){
      this.rulesModalForm.subordinateYear = event
      if(this.rulesModalForm.subordinateYear&&this.rulesModalForm.subordinateMonth){
        this.selectDay = this.getDayData(this.rulesModalForm.subordinateYear,this.rulesModalForm.subordinateMonth)
      }
    },
//日
    changeDay(event) {
      this.rulesModalForm.subordinateDay = event;
    },
//计算日期
    getDayData(year,month){
      let day;
      this.selectDay = []//重置下拉框数组
      if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
        day = 31
      } else if (month == 4 || month == 6 || month == 11 || month == 9) {
        day = 30
      } else if (month == 2) {
        if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) { //闰年
          day = 29
        } else {
          day = 28
        }
      }
      for(let i = 1;i < day + 1; i ++){
          this.selectDay.push({
            value: i+'',//把日期下拉框的值转为字符串 因为保存接口需要的是字符串类型的数据 而不是数字 1 数字加空字符串 得到的数字是字符串类型的 2 下拉框实际的值是value字段的值  
            label: i,
          },)
      }
    },
 // 因为这个年月日是写在弹窗中的 所以需要在打开编辑弹窗前首先获取到日期下拉框数组的数据 这里是在打开除去新增弹窗以外的弹窗时 比如详情和编辑 会自动获取 待优化
//打开弹窗时的监听函数
 openModal() {
      // this.isAdd 为true表示是新增  
      if (this.isAdd) {
        this.initForm();
        this.selectDay = [];//初始化日期下拉框数组
      } else {
        this.rulesModalForm = JSON.parse(JSON.stringify(this.form));
        //获取日期下拉框数组的数据
        this.getDayData(
          this.rulesModalForm.subordinateYear,
          this.rulesModalForm.subordinateMonth
        );
      }
    },
 }
 

css部分的代码

<style lang="less" scoped>
// 因为选择月份时不需要时间选择框上面的年份 所以给月份的时间选择器自定义了一个class为chooseMonth 从而只改变他的时间选择框的样式
/deep/ .chooseMonth .ivu-date-picker-header {
  display: none;
}