直播带货源码，日期时间选择器 选择范围限制

直播带货源码，日期时间选择器 选择范围限制

代码：

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"
            }
          ]
        }
    }
}

以上就是直播带货源码，日期时间选择器 选择范围限制， 更多内容欢迎关注之后的文章