element UI-日期選擇器（el-date-picker）

1.需求：結束日期選擇範圍：開始日期-開始日期+30天

2.實現：

使用el-date-picker組件的picker-options屬性，及picker-options中的disabledDate方法

 

代碼（style也在，可忽略）：

<template>
  <div class="medicalRecord">
    <h3 class="title"><span class="left-border"></span>Demo</h3>
    <div class="main-content">
      <div class="content-top">
        <el-form style="width: 100%" :inline="true" :model="formResult" ref="formResult" hide-required-asterisk class="form-box">
          <ul class="flex-space-between" style="width: 100%">
            <li style="width:340px;">
              <el-form-item label="任務起期：" prop="beginTaskDate" class="errorFixCss timePicker" label-width="96px">
                <el-date-picker
                  v-model="formResult.beginTaskDate"
                  type="date"
                  :clearable="true"
                  placeholder="選擇日期"
                  format="yyyy-MM-dd"
                  @focus="resetTaskDate"
                  class="startTimeBox"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="任務止期：" prop="endTaskDate" class="errorFixCss timePicker" label-width="96px">
                <el-date-picker
                  v-model="formResult.endTaskDate"
                  :picker-options="pickerOptions"
                  type="date"
                  :clearable="true"
                  placeholder="選擇日期"
                  format="yyyy-MM-dd"
                  class="startTimeBox"
                ></el-date-picker>
              </el-form-item>
            </li>
          </ul>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'taskSearch',
  data () {
    return {
      formResult: {
        beginTaskDate: '', // 任務日期起
        endTaskDate: '' // 任務日期終
      },
      pickerOptions: {
        disabledDate: (time) => {
          if (this.formResult.beginTaskDate) {
            let date1 = this.formResult.beginTaskDate
            let date2 = new Date(date1)
            date2.setDate(date1.getDate() + 30)
            return time.getTime() < this.formResult.beginTaskDate || time.getTime() > date2
          } else {
            return time.getTime() < this.formResult.beginTaskDate
          }
        }
      }
    }
  },
  methods: {
    // 任務起期獲取焦點時觸發
    resetTaskDate () {
      // 清空任務止期
      this.formResult.endTaskDate = ''
    },
    // 獲取數據
    getData () {
      let obj = this.formResult
      console.log('obj;;;', obj)
      this.$axios({
        url: 'XX/query',
        method: 'post',
        data: {
          'tradeMap': {
            'beginTaskDate': obj.beginTaskDate === '' ? '' : this.$moment(obj.beginTaskDate).format('YYYY-MM-DD'), // '任務日期起',
            'endTaskDate': obj.endTaskDate === '' ? '' : this.$moment(obj.endTaskDate).format('YYYY-MM-DD') // '任務日期終',
          }
        }
      }).then(res => {
        console.log(res)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>
<style lang="less">
  .setClass {
    color: red;
  }
  .el-range__icon {
    background: url('../../../static/img/disabled_date.png') center no-repeat;
  }
  .el-range__icon:before{
    content: "";
    font-size: 16px;
    visibility: hidden;
  }
</style>
<style scoped lang="less" rel="stylesheet/less">
  .medicalRecord{
    /deep/ .el-form--inline .el-form-item__label{
      color: #616467 !important;
      height: 32px !important;
      line-height: 32px !important;
    }
    /deep/ .content-top .form-box .el-form-item__content {
      width: 240px !important;
      height: 32px !important;
    }
    /deep/ .el-form--inline .el-form-item{
      margin-left: 0 !important;
    }
    /deep/ .el-form--inline .el-form-item__label{
      margin-right: 0;
      // text-align: left;
    }
    /deep/ .content-top .inputWrap input{
      width: 240px !important;
      padding:0 4px;
    }
    /deep/ .shortInputWrap {
      .shortInput {
        input{
          width: 94px !important;
        }
      }
    }
    /deep/ .content-top .form-box .shortInputLeft .el-form-item__content{
      width: 94px !important;
    }
    /deep/ .flex-space-between{
      width: 100%;
    }
    /deep/ .line{
      margin-top: 10px;
    }
    /deep/ .content-top{
      padding-bottom: 0 !important;
    }
    /deep/ .selectId .el-input__inner{
      width: 80px !important;
    }
    /deep/ .idInput .el-input__inner {
      font-size: 12px !important;
      width: 150px !important;
    }
    /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 240px !important;
    }
    /deep/ .el-input--small .el-input__icon {
      line-height: 32px !important;
    }
    /deep/ .el-form-item__content {
      line-height: 32px !important;
    }
    /deep/ .el-input__icon {
      line-height: 32px !important;
    }
    /deep/ .el-table__body .el-radio__inner {
      // display: none;
    }
    /deep/ .el-table .cell {
      padding-right: 0px !important;
    }
    /deep/ .el-radio__label {
      display: none;
      padding-left: 0px !important;
    }
    /deep/ .el-button+.el-button {
      margin-left: 6px !important;
    }
    .errorFixCss {
      /deep/.el-form-item__error {
        margin-top: -4px;
      }
    }
    .errorFixCss .el-date-editor.el-input {
      // margin-top: 2px !important;
    }
    .timePicker {
      /deep/.el-date-editor .el-icon-circle-close {
        position: absolute;
        right: 20px;
        top: 0px;
      }
    }
    .startTimeBox {
      width: 240px !important;
      border: 1px solid #DCDFE6;
      overflow: hidden;
      height: 32px;
      color:#606266;
      border-radius: 4px;
      /deep/ .el-input__inner {
        position: absolute;
        // top: 3px;
        // background: url('../../../static/img/disabled_date.png') 210px center no-repeat;
        background: url('../../../static/img/disabled_date.png') 210px 6px no-repeat;
      }
    }
    /deep/ .el-input {
      height: 32px !important;
    }
    .imgText{
      border: 1px solid #eee;
      border-radius: 4px;
      height: 36px;
      line-height: 36px;
      padding: 0 38px 0 15px;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .title{
      color: #333333;
      font-size: 18px;
      font-weight: bold;
      text-align: left;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      margin-bottom: 20px;
      margin-top: 20px;
      span{
        display: inline-block;
        width: 6px;
        height: 18px;
        background: #FF694E;
        margin-right: 10px;
      }
    }
    .main-content{
      background: #ffffff;
      margin-bottom: 20px;
      padding: 20px 0 0;
      min-width:1180px;
      .content-top{
        padding: 0 15px 20px;
        margin-bottom: 20px;
        border-bottom: 20px solid #F3F3F3;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-box{
          display: flex;
          display: -webkit-flex;
          justify-content: space-around;
          width: 190px;
          height: 36px;
          border: 1px solid #D1D1D1;
          border-radius: 2px;
          overflow: hidden;
          li{
            text-align: center;
            height: 36px;
            line-height: 36px;
            flex: 1;
          }
          li:hover{
            cursor: pointer;
            background: #f2f2f2;
          }
          li:nth-of-type(1),li:nth-of-type(2){
            border-right: 1px solid #D1D1D1;
          }
        }
      }
      .form-box{
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: left;
        .el-form-item{
          margin-bottom: 14px;
        }
      }
      .table-box{
        box-sizing: border-box;
        width: calc(100% - 40px);
        margin: 0 auto 20px;
        border: 1px solid #E4E4E4;
        text-align: center;
        color: #666666;
        font-size: 14px;
      }
      .search-btn{
        width: 64px;
        height: 32px;
        line-height: 7px;
        border-radius: 2px;
        border: none;
        background: -webkit-linear-gradient(#FF9C70, #FF694E); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#FF9C70, #FF694E); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#FF9C70, #FF694E); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right,#FF9C70, #FF694E); /* 標準的語法 */
        span{
          font-size: 16px;
        }
      }
    }
    /deep/ .contentBox {
      // min-width: 1400px !important;
      width: 100% !important;
      // width: calc(100% + 220px) !important;
    }
  }
</style>

 3.實現效果：

4.其他：

可以使用vue-moment處理日期，使用方法如下：

1）安裝-npm install vue-moment --save

2）在main.js中引入

import Moment from 'vue-moment'

Vue.use(Moment)

 

 3）使用

this.$moment(obj.beginTaskDate).format('YYYY-MM-DD')