使用elementUI的日期選擇框,兩選擇框關聯時間限值


elementui 本身也提供了在一個輸入框內關聯選擇時間的組件,非常好使,但無奈項目需要用兩個輸入框去關聯的選擇:

 

                      <el-date-picker
                                      class="datepicker"
                                      size="mini"//尺寸
                                      v-model="startTimed"
                                      type="date"//日期類型
                                      value-format="timestamp"//日期返回的時間格式,時間戳
                                      :picker-options="start_date"//主要的功能,設置時間范圍設定
                                      placeholder="選擇開始日期">
                                    </el-date-picker>
                                    <span style="display: inline-block;width: 40px;font-size: 12px;text-align: center;">——</span>
                                    <el-date-picker
                                      class="datepicker"
                                      size="mini"
                                      v-model="endTimed"
                                      type="date"
                                      value-format="timestamp"
                                      :picker-options="end_date"
                                      placeholder="選擇結束日期">
                                    </el-date-picker>

在data里面:

       startTimed: "",//開始時間
            endTimed:"",//結束時間
            start_date:{//開始時間范圍限定
                disabledDate:time => {
                    if(this.endTimed) {
                        return time.getTime() > Date.now()-8.64e7 || time.getTime() >= this.endTimed;
                    }   
                    return time.getTime() > Date.now()-8.64e7;
                }
            },
            end_date:{//結束時間范圍限定
                disabledDate:time => {
                    return time.getTime() >= Date.now()-8.64e6 || time.getTime() <= this.startTimed;
                }
            },
       //主要是disabledDate的取值,返回值;
       //注意8.64e7和8.64e6的區別,后面的包括了當前的一天;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM