uniapp日历uni-calendar搭配酒店入住离店时间段

项目想要实现用户点击日期选择 入住日期 及 离店日期（一个范围）。

注: 本文章没有修改组件源码,另有大佬通过修改原源码实现第三次点击即可进行下一次日期范围的选择:uni-calendar日历组件日期范围默认选中及优化存在日期范围后点击第一下、第二下选中为下一日期范围_新手前端王老四的博客-CSDN博客

一、初出茅庐：

但是发现，第一次点击是入住时间，第二次点击是离店时间。通过测试uni-calendar发现只有点击日历第三次才在离店日期下面出现 ‘离店’ 字体，显然达不到我要的结果。具体如下：

 二、小心翼翼

当我突然想试试在月底与下月初选择看看效果时，有个惊奇的发现：好像有点是我想要的了。如下：第一次点击选择2月27，第二次点击是选择3月3，第三次点击（敲重点）是切换了右上角的月份的图标，切换回2月份康康。发现27号下面有文字（正常，因为选择3月3的时候就会显示入住文字）。第四次点击是切换回3月康康。哦吼，也有了（不用我再选择一下其他日期了）

 这就奇怪了，突然可以了，我总觉得很多时候实现各种代码需要一些运气（不止这次）~

三、牛刀小试

这时我又想起携程的这个交互是在用户第二次选择时就把日历弹窗关闭，再次进来时就能看到选择的日期范围。于是我也试了一下：

 嘿嘿，也能显示文字了，但是背景效果没有填充，不急不急，再康康先。

这时候我发现刚刚点击第三下切回2月份时，应该是与选择24号时是一样的效果，也就是选择完入住时间与离店时间之后还需要再任意点一下，组件才会返回离店文字。

四、循环渐进

 问题又来了。继续以上操作，发现可以选两次范围，这肯定是不可取的：

 于是我去看看组件change返回的数据是怎样的，毕竟它只返回这一个方法。就发现了选择数据返回的range不一样

 那么我就可以通过这个range判断选择日期之前是否有数据，也就是通过查看info.selected长度是否大于0判断的。当用户选择入住日期时，在change函数内先判断是否有info.selected长度是否大于0，大于0就把日期数据清空。这样每次就只能选一个时间段了。

 此时，大工快告成了。就差时间段的背景色没有显示出来，这时候我有了发个scdn的念头，于是就先还原下这个交互的实时（需要上面那些截图嘛），这时候，神器的事情又发生了，当我把选择离店日期后弹窗关闭那一代码注释时（已经写了第四步的判断的），发现时间段的背景竟然出来了！！但是试了一下，如果不关闭弹窗，选择完日期确实能完整展现我最初要的结果，但是想重新选日期的话，还是会出现得点击第三下再点击第四下，此时不会再出现完整的第二段时间段，而需要点第五个日期时，第四和第五才会组成新的日期，也就是说选择完日期后还是需要点击一下（第三次点击：算是清空吧，这一下是无任何作用的，应该是组件问题）。

五、大功告成

所以最后的结果还是跟某程一样，选完时间段关闭弹窗，再次点击（第三次点击）展示弹框时就能出现最初的效果了。

主要代码：

// 选择日历
const change = (e: any) => {console.log('change 返回:', e)// 点击时日期信息已有数据，清空if (state.info.selected.length > 0) {state.info.selected = []}// 模拟动态打卡console.log(state.info.selected)if (state.info.selected.length > 5) returnstate.info.selected.push({date: e.range.before,info: '入住',})state.info.selected.push({date: e.range.after,info: '离店',})// 已有日期范围时，关闭弹窗if (e.range.data.length > 0) {popupCalendarRef.value.close()}
}

 原创不易，给小弟点点赞拨~