直播帶貨原始碼，日期時間選擇器 選擇範圍限制

直播帶貨原始碼，日期時間選擇器 選擇範圍限制

程式碼：

picker-options來控制不可以選擇範圍
<div class="flex-wrap">
<el-date-picker 
                            class="uni-startTime_show"
type="datetime"
placeholder="開始日期"
:picker-options="startTime"
value-format='yyyy-MM-dd HH:mm'
                            format="yyyy-MM-dd HH:mm"
v-model="searchForm.startTime_show"
></el-date-picker>
-
<el-form-item
prop="endTime_show"
ref="endTime_show"
>
<el-date-picker
type="datetime"
placeholder="結束日期"
:picker-options="endTime"
value-format='yyyy-MM-dd HH:mm'
                                format="yyyy-MM-dd HH:mm"
v-model="searchForm.endTime_show"
></el-date-picker>
</el-form-item>
</div>

 在data中定義開始時間 startTime和結束時間endTime的不可以選擇範圍

 

data() {
    return {
         startTime: {
            disabledDate: time => {
                if (this.searchForm.endTime_show) {
                    // 設定開始時間小於結束時間
                    return time.getTime() > new Date(this.searchForm.endTime_show).getTime()  
                }
            }
        },
        endTime: {
            disabledDate: time => {
                if (this.searchForm.startTime_show) {
                    // 結束時間大於開始時間
                    return time.getTime() < new Date(this.searchForm.startTime_show).getTime() - 8.64e7; //如果不減8.64e7開始時間和結束時間就不能選擇同一天
                }
            }
        },
        searchRules:{
          startTime_show:[
            {
              validator:(rule, value, callback) => {
                let startTime=this.searchForm.startTime_show;
                startTime= new Date(Date.parse(startTime));
                console.log("startTime",startTime)
  
                let endTime=this.searchForm.endTime_show;
                // endTime= endTime.replace("-","/");//替換字元，變成標準格式
                endTime= new Date(Date.parse(endTime));
                if(startTime > endTime) {
                  return callback(new Error('開始時間不能大於結束時間'));
                }else{
                  callback();
                }
              },
              trigger: "change"
            }
          ],
          endTime_show:[
            {
              validator:(rule, value, callback) => {
                let startTime=this.searchForm.startTime_show;
                startTime= new Date(Date.parse(startTime));
                console.log("startTime",startTime)
  
                let endTime=this.searchForm.endTime_show;
                // endTime= endTime.replace("-","/");//替換字元，變成標準格式
                endTime= new Date(Date.parse(endTime));
                if(endTime < startTime) {
                  return callback(new Error('結束時間不能小於開始時間'));
                }else{
                  callback();
                }
              },
              trigger: "change"
            }
          ]
        }
    }
}

以上就是直播帶貨原始碼，日期時間選擇器 選擇範圍限制， 更多內容歡迎關注之後的文章