使用element-ui的el-date-picker和el-time-select遇到的问题,及解决

HTML

日期选择框

                            <el-date-picker
                                v-model="item.realData"
                                :clearable="false"
                                type="date"
                                size="small"
                                @change="changeMaintain(item)"
                                value-format="yyyy年/M月/d日"
                                format="yyyy年/M月/d日"
                                :picker-options="pickerOptions"
                                placeholder="选择日期">
                            </el-date-picker>

然后是开始时间选择框

         <el-time-select
                v-model="item.realStartTime"
                :clearable="false"
                size="small"
                 @change="changeItemWorkItem(item)"
                 :picker-options="{
                      start: '00:00',
                      step: '00:60',
                      end: '23:00',
                      minTime:item.isToday || item.createTime.substr(11,2) - 1 + ':00'
                  }"
                 placeholder="开始时间">
          </el-time-select>

结束时间选择框

          <el-time-select
                v-model="item.realEndTime"
                :clearable="false"
                size="small"
                :picker-options="{
                        start: '01:00',
                        step: '00:60',
                        end: '24:00',
                        minTime:item.realStartTime,
                        maxTime:item.currentHTime || new Date().getHours() + 1 + ':00
                        }"
                placeholder="结束时间">
                                  
          </el-time-select>

data

         pickerOptions: {
                disabledDate(time) {
                    //可以在这里写逻辑,也可以把this保存到self,然后调用aaa方法
                    // return self.aaa(time)
                    //这里只判断当前时间之前的禁止使用,如果是多个条件用||
                    return  time.getTime()+86400000 < Date.now() 
                },
            },
 changeMaintain(item) {
            console.log('点击日期选择框',item.realData); //格式为2021年/8月/5日
            this.item = item
            this.currentCreateTime = item.createTime
            let y = parseInt(item.realData.split('/')[1]) < 10 ? '0'+ parseInt(item.realData.split('/')[1]) : parseInt(item.realData.split('/')[1])
            let r = parseInt(item.realData.split('/')[2]) < 10 ? '0'+ parseInt(item.realData.split('/')[2]) : parseInt(item.realData.split('/')[2])
            let time =  parseInt(item.realData.split('/')[0]).toFixed(0) + '-' + y + '-' + r  

            
            if(time ===  item.createTime.substr(0,10)) {
                this.item.isToday = (this.item.createTime.substr(11,2) -1) + ':00'
            } else {
                this.item.isToday = '00:00'
            }

            // let nian  = new Date().getFullYear().toFixed(0)
            // let yue  = new Date().getMonth()+1 < 10 ? "0" + (new Date().getMonth()+1) : new Date().getMonth()+1 
            // let ri = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
            // let currentTime = nian + '-' + yue + "-" + ri

            // if(time === currentTime){
            //     this.item.currentHTime = new Date().getHours()+2+":00"
            //     this.item.currentStartHTime = new Date().getHours()+1+":00"
            //     return false
            // } else {
            //     this.item.currentHTime = false
            //     this.item.currentStartHTime = "24:00"
            // }

            this.$forceUpdate()            
        },

上一篇:倒计时(日期对象)


下一篇:1017:装箱问题 百练noi