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的區別,后面的包括了當前的一天;