elementUI实现月、季度、年 时间选择框

elementUI实现月、季度、年 时间选择框

 

一、通过 el-date-picker 组件来实现月、年的选择

　　代码如下：

<el-date-picker
  v-if="dateType === 'month' || dateType === 'year'"
  v-model="time"
  :type="dateType"
  :picker-options="pickerOptions"
  placeholder="请选择"
>
</el-date-picker>

 

二、通过自定义组件来实现季度的选择框

<div class="el-quarter-picker">
    <el-popover
      v-model="visible"
      :disabled="!canPopover"
      :tabindex="null"
      placement="bottom-start"
      transition="el-zoom-in-top"
      trigger="click">

      <div class="el-date-picker">
        <div class="el-picker-panel__body">
          <div class="el-date-picker__header el-date-picker__header--bordered" style="margin:0px; line-height:30px">
            <button
              type="button"
              @click="clickLast"
              aria-label="前一年"
              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button>
            <span role="button" class="el-date-picker__header-label" @click="clickYear">{{ title }}</span>
            <button
              type="button"
              @click="clickNext"
              aria-label="后一年"
              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
          </div>
          <div class="el-picker-panel__content" style="margin:0px; width:100%">
            <table class="el-month-table" style="">
              <tbody>
              <tr v-for="line in lineCount" :key="line">
                <td v-for="index in (line * 4 <= viewList.length ? 4 : viewList.length - (line - 1) * 4)" :key="index" :class="{ today: viewList[(line - 1) * 4 + index - 1].current, current: viewList[(line - 1) * 4 + index - 1].active }">
                  <div><a class="cell" @click="clickItem(viewList[(line - 1) * 4 + index - 1])">{{ viewList[(line - 1) * 4 + index - 1].label }}</a></div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <el-input
        slot="reference"
        @change="changeText"
        @mouseenter.native="mouseEnter"
        @mouseleave.native="mouseLeave"
        :placeholder="placeholder"
        v-model="text"
        :size="size"
        :readonly="!canEdit"
        :disabled="disabled">
        <i slot="prefix" class="el-input__icon el-icon-date"></i>
        <i slot="suffix" class="el-input__icon el-icon-circle-close" v-show="showClear" style="cursor:pointer" @click.stop="clear"></i>
      </el-input>
    </el-popover>
</div>

 

完整代码，点击链接下载

三、整体效果如下