ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-08-04 16:34:55  阅读:888  来源: 互联网

标签:picker el item realData split time Date new parseInt


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()            
        },

标签:picker,el,item,realData,split,time,Date,new,parseInt
来源: https://blog.csdn.net/weixin_49035434/article/details/119386809

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有