案例-做一个酒店预定小程序用的日期选择案例

最新推荐文章于 2024-04-19 17:57:39 发布

逍遥生-前端

最新推荐文章于 2024-04-19 17:57:39 发布

阅读量6.7k

点赞数 3

文章标签：酒店预定日历酒店预定日期选择日期范围选择小程序日期选择

本文链接：https://blog.csdn.net/u012562411/article/details/85287537

版权

本文介绍如何制作一个用于酒店预定的小程序日期选择案例，适用于支付宝和微信小程序。通过构建最近6个月的日历，展示并高亮显示入住和离店时间。文中提供HTML、CSS和JS代码，并对优化部分进行了说明，包括选择入住时间后的离店时间处理及禁止选择今天之前日期的逻辑。

摘要由CSDN通过智能技术生成

今天给大家分享一个酒店预定小程序用的日期选择案例，我是做的支付宝小程序，如果需要应用到微信小程序，请将相关字眼改成微信用的字眼，比如onTap改bindtap，a:if或者a:for改成wx:if和wx:for，JS和CSS大体是一样的，不需要修改，不多说，先上效果图

在这里插入图片描述
设计思路：根据年份和月份构建最近6个月的日历，获取每个月的第一天是星期几，空白用空对象填充，每个月需要的格子数 = 每月1号的星期数 + 每月对应的天数。在HTML中遍历日期数据，根据条件判断高亮显示入住时间、离店时间以及两者之间的时间。一下是全部代码(优化在最后).

html代码

    <view class="page">
      <view class="reserve-time">
        <text>入住时间</text>{
  {inTime}}
        <text>离店时间</text>{
  {outTime}}
      </view>
      <!-- 星期 -->
      <view class='header'>
        <view a:for='{
  {date}}' class='{
  {item == "周六" || item == "周日" ? "weekM