小程序酒店预订日期组件

最新推荐文章于 2024-04-11 09:55:17 发布
最新推荐文章于 2024-04-11 09:55:17 发布
阅读量1.5k 收藏 10
点赞数 2
分类专栏： 前端组件 文章标签： 前端 javascript html xhtml
原文链接：http://blog.csdn.net/lengyue1084/article/details/71248778
版权

本插件在原作者（转载地址：http://blog.csdn.net/lengyue1084/article/details/71248778）基础上升级。

 components/calendar/calendar.wxml

<view class="page">
  <view class="box">
    <view class="box-flex">
      <view class="flex-item">
        <view class="item-content" bindtap="doDay" data-key='left'>
          <!-- <view class="glyphicon glyphicon-triangle-left"></view> -->
          <image src="./imgs/left_icon.png"></image>
        </view>
      </view>
      <view class="flex-item item-content-current-day">
        <view class="item-content">{{currentDate}}</view>
      </view>
      <view class="flex-item">
        <view class="item-content" bindtap="doDay" data-key="right">
          <image src="./imgs/right_icon.png"></image>

          <!-- <view class="glyphicon glyphicon-triangle-right"></view> -->
        </view>
      </view>
    </view>
    <view class="box-flex week">
      <view class="flex-item">
        <view class="item-content">一</view>
      </view>
      <view class="flex-item">
        <view class="item-content">二</view>
      </view>
      <view class="flex-item">
        <view class="item-content">三</view>
      </view>
      <view class="flex-item">
        <view class="item-content">四</view>
      </view>
      <view class="flex-item">
        <view class="item-content">五</view>
      </view>
      <view class="flex-item">
        <view class="item-content">六</view>
      </view>
      <view class="flex-item">
        <view class="item-content">日</view>
      </view>
    </view>
    <view class="box-flex">
    
      <view class="flex-item {{currentMonth<nowMonth&&nowYear==currentYear?'colorAdd':currentMonth==nowMonth?(vo>=nowData?'':'colorAdd'):''}}"
        wx:for="{{currentDayList}}" wx:for-index='key' data-day="{{vo}}" data-index="{{key}}" wx:for-item="vo"
        wx:key="{{key}}"
        bindtap="{{currentMonth>nowMonth?'selectDay':currentMonth==nowMonth?(nowData<=vo?'selectDay':''):''}}">
        <!-- 高亮显示 -->
        <view data-day="{{vo}}" data-index="{{key}}"
          class="item-content bk-color-day {{select[0].date==vo&&currentMonth==select[0].month?'border_left':''||select[1].date==vo&&currentMonth==select[1].month?'border_Right':''}}"
          wx:if="{{select.length==2?(select[0].month==select[1].month?(currentMonth==select[0].month&&select[0].date<=vo&&vo<=select[1].date):(select[0].month==currentMonth&&select[0].date<=vo&&vo||currentMonth==select[1].month&&select[1].date>=vo&&vo||select[0].month<currentMonth&&currentMonth<select[1].month&&vo)):(currentMonth==select[0].month&&vo==select[0].date&&vo)&&nowYear==currentYear}}">
          {{vo}}</view>

        <view data-day="{{vo}}"  data-index="{{key}}" class="item-content {{!selectCSS}}"  wx:else>{{vo}}</view>
      </view>
    </view>
    <view class="box-flexs">
      <view class="flex-items">
        <view class="item-contents">{{starDate}}<text>入住</text></view>
      </view>
      <view class="flex-items" wx:if="{{countDates}}">
        <view class="item-contents item-number">共{{countDates}}晚</view>
      </view>
      <view class="flex-items">
        <view class="item-contents"><text>离开</text>{{endDate}}</view>
      </view>

    </view>
  </view>
</view>

 components/calendar/calendar.wxss

/* @import '../../dist/css/icon.wxss'; */

page {
  background-color: #2a8cef;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2a8cef), to(#8A2BE2));
  background: #ccc;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  font-size: 14px;
}

.box {
  display: block;
  /* margin: 10px; */
  background-color: #fff;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
}

.box-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex-flow: nowrap;
  flex-grow: 1;
  flex-shrink: 1;
  width: 14.2%;
}

.item-content {
  margin: 10px 0;
  padding: 0 10px;
  text-align: center;
  /* background-color: #000; */
  height: 45rpx;
  line-height: 45rpx;
  color: #201C1D;
  /* font-size: 34rpx; */
}

.week .item-content {
  color: #F09F2A;
  font-weight: bold;
  font-size: 28rpx;
}

.bk-color-day {
  background-color: #F09F2A;
  color: #fff;
}

.item-content-current-day {
  flex-grow: 2;
}

.box-flexs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item-contents {
  /* line-height: 100rpx; */
}

.box-flexs {
  font-size: 30rpx;
  padding: 45rpx 5rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  margin-top: 20rpx;
}

.item-contents text {
  font-size: 24rpx;
  padding: 0 10rpx;
  color: #656467;
}

.item-number {
  color: #F09F2A;
}

.colorAdd .item-content {
  color: #999;
}

.border_left {
  border-radius: 45rpx 0 0 45rpx;
}

.border_Right {
  border-radius: 0 45rpx 45rpx 0;
}

.item-content image {
  width: 15rpx;
  height: 27rpx;
}

components/calendar/calendar.js

// components/calendar/calendar.js
var app = getApp();

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    currentDate: "2017年05月03日",
    dayList: '',
    currentDayList: '',
    currentObj: '',
    currentDay: '',
    nowData: '',
    nowYear: '',
    nowMonth: '',
    select: [],
    countDates: '',


    //日期初始化选中样式
    selectCSS: 'bk-color-day',
    starDate: '',
    endDate: ''
  },

  /**
   * 组件的方法列表
   */
  ready: function () {
    var that = this;
    var currentObj = this.getCurrentDayString()
    // + currentObj.getDate()
    this.setData({
      currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月',
      currentDay: currentObj.getDate(),
      currentObj: currentObj,
      /*  获取当前的年、月  */
      currentYear: currentObj.getFullYear(),
      currentMonth: (currentObj.getMonth() + 1),
      nowData: currentObj.getDate(),
      nowYear: currentObj.getFullYear(),
      nowMonth: (currentObj.getMonth() + 1),

    })

    this.setSchedule(currentObj);
    console.log(this.data.currentDayList,this.data.nowYear,999999)

  },

  methods: {
    doDay: function (e) {
      var that = this;

      var currentObj = that.data.currentObj
      var Y = currentObj.getFullYear();
      var m = currentObj.getMonth() + 1;
      var d = currentObj.getDate();
      var str = ''
      if (e.currentTarget.dataset.key == 'left') {
        m -= 1
        if (m <= 0) {
          str = (Y - 1) + '/' + 12 + '/' + d
        } else {
          str = Y + '/' + m + '/' + d
        }
      } else {
        m += 1
        if (m <= 12) {
          str = Y + '/' + m + '/' + d
        } else {
          str = (Y + 1) + '/' + 1 + '/' + d
        }
      }
      currentObj = new Date(str)
      // + currentObj.getDate()
      this.setData({
        currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月',
        currentObj: currentObj,
        /*  获取当前的年、月  */
        currentYear: currentObj.getFullYear(),
        currentMonth: (currentObj.getMonth() + 1),
      })
      console.log("选择当前年：" + that.data.currentYear);
      console.log("选择当前月：" + that.data.currentMonth);
      this.setSchedule(currentObj);
    },
    getCurrentDayString: function () {
      var objDate = this.data.currentObj
      if (objDate != '') {
        return objDate
      } else {
        var c_obj = new Date()
        var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate()
        return new Date(a)
      }
    },
    setSchedule: function (currentObj) {
      var that = this
      var m = currentObj.getMonth() + 1
      var Y = currentObj.getFullYear()
      var d = currentObj.getDate();
      var dayString = Y + '/' + m + '/' + currentObj.getDate()
      var currentDayNum = new Date(Y, m, 0).getDate()
      var currentDayWeek = currentObj.getUTCDay() + 1
      var result = currentDayWeek - (d % 7 - 1);
      var firstKey = result <= 0 ? 7 + result : result;
      var currentDayList = [];
      var f = 0
      for (var i = 0; i < 42; i++) {
        let data = []
        if (i < firstKey - 1) {
          currentDayList[i] = ''
        } else {
          if (f < currentDayNum) {
            currentDayList[i] = f + 1;
            f = currentDayList[i]
          } else if (f >= currentDayNum) {
            currentDayList[i] = ''
          }
        }
      }
      that.setData({
        currentDayList: currentDayList
      })
    },

    //选择具体日期方法--xzz1211
    selectDay: function (e) {
      var that = this;
      console.log(e);
      var starDate = '',
        endDate = '',
        that = this,
        countDate = ''

      var select = this.data.select
      var obj = {}
      obj.month = this.data.currentMonth
      obj.date = e.target.dataset.day
      if (select.length < 2) {
        select.push(obj)
        starDate = select[0].month + '月' + select[0].date + '日'
        if (select.length == 2) {
          endDate = select[1].month + '月' + select[1].date + '日'
          if (select[0].month == select[1].month) {
            if (select[1].date <= select[0].date) {
              console.log('第二个小于第一个')
              select = []
              select.push(obj)
              starDate = select[0].month + '月' + select[0].date + '日'
              endDate = ''
              console.log(select, 5555)
            }

          } else if (select[0].month < select[1].month) {
            console.log('第二个小于第一个')
            endDate = select[1].month + '月' + select[1].date + '日'
          } else {
            select = []
            select.push(obj)
            endDate = ''
            starDate = select[0].month + '月' + select[0].date + '日'
            console.log(select, 222)
          }
          if (starDate && endDate) {
            countDate = this.getDaysBetween(that.data.currentYear + '-' + select[0].month + '-' + select[0].date, that.data.currentYear + '-' + select[1].month + '-' + select[1].date)
          }

        }



      } else {
        console.log('第三个')
        select = []
        select.push(obj)
        starDate = select[0].month + '月' + select[0].date + '日'
      }
      console.log(select, starDate, endDate, 88888, countDate)

      that.setData({
        currentDay: e.target.dataset.day, //选择的数据，非真实当前日期
        currentDa: e.target.dataset.day, //选择某月具体的一天
        currentDate: that.data.currentYear + '年' + that.data.currentMonth + '月',
        endDate: endDate,
        starDate: starDate,
        select: select,
        countDates: countDate
      })

      // + e.target.dataset.day,//真实选择数据
      console.log("当前选择日期：" + that.data.currentDate);
    },
    getDaysBetween: function (dateString1, dateString2) {
      var startDate = Date.parse(dateString1);
      var endDate = Date.parse(dateString2);
      if (startDate > endDate) {
        return 0;
      }
      if (startDate == endDate) {
        return 1;
      }
      var days = parseInt((endDate - startDate) / (1 * 24 * 60 * 60 * 1000));
      return days;
    },
    
  }
})

 在父组件中引用 wxml

      <checkin-picker />

json中

{
  "usingComponents": {
    "checkin-picker": "/components/calendar/calendar"
  }

源码地址：https://gitee.com/yu_ya_nan/calendar-component-.git

technicalwhite_鱼
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
微信小程序实现酒店入住时间区间选择日历
qq_40591925的博客
12-05 1万+
组件版1：https://pan.baidu.com/s/1Iie3Fxgc6RjLQr1pYJk_BQ （下载即可用） 下面代码 除农历显示不出来（把显示农历的地方删除，有提示！！！【<!-- ↓显示农历↓ -->】！！！），复制可以直接使用。 代码如下： rili.wxss: page{ height: 100%; position: relative; ...
微信小程序--选择酒店入住离店时间的控件
03-29
BGCalendar  微信小程序，选择酒店入住离店时间的控件 效果图 (此图片来源于网络，如有侵权，请联系删除! ) image 使用方法   //事件处理函数 bindViewTap: function() { var that = this; //传递入住离店时间 var startDate = that.data.date; var endDate = that.data.tomorrow; console.log(startDate); console.log(endDate); wx.navigateTo({ url: '../calender/index?startDate='
Vue-Hotel-Datepicker：一款优雅的日历选择组件
最新发布
gitblog_00087的博客
04-11 339
Vue-Hotel-Datepicker：一款优雅的日历选择组件 项目地址:https://gitcode.com/krystalcampioni/vue-hotel-datepicker 项目简介 Vue-Hotel-Datepicker 是一个专为Vue.js框架设计的日期选择器组件，特别适用于酒店预订或者其他需要多日期选择的场景。它提供了清晰的UI设计和流畅的用户体验，让你的Web应用在处理...
jQuery手机端仿美团酒店预订日期选择插件
Lucky Star的博客
01-03 4268
jQuery手机端仿美团酒店预订日期选择插件 .Date_lr{width:50%;text-align:center;} .span21{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
小程序酒店日历插件
Salunone的博客
09-24 1184
最近在写酒店的项目,需要用到日历插件。代码如下：放在一个组件里面，在页面中直接饮用组件 const formatDate = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() return [year, month, d...
小程序日期（日历）时间 选择器组件
少年的范儿的博客
02-24 6087
封装一个很好用 小程序的日期（日历）时间组件，日期用日历选择，时间用 小程序 的 picker-view 来实现
uniapp 微信小程序 时间段选择组件
07-24
在微信小程序开发中，开发者经常需要为用户提供便捷的时间选择功能，比如预定服务、安排日程等。`uniapp`是一个跨平台的开发框架，它允许开发者编写一次代码，即可运行在多个平台上，包括微信小程序。在`uniapp`中...
微信小程序日历日期选择器.zip
06-02
在微信小程序开发中，日历日期选择器是一个常见的交互组件，用于用户选择特定日期或日期范围。本项目“微信小程序日历日期选择器”提供了一种定制化解决方案，允许开发者根据需求调整显示的月份和可选日期范围，并且...
基于微信小程序的酒店预订小程序.zip
02-18
酒店预订小程序正是这种理念的应用，通过微信小程序，用户可以在微信内直接完成酒店查询、预订、支付等一系列操作，极大地提升了用户体验。 【开发环境与工具】 开发微信小程序，主要使用的工具有微信开发者工具。...
微信小程序日历（预定酒店办）
07-21
在微信小程序开发中，"微信小程序日历（预定酒店办）"是一个专为酒店预订设计的应用，它以直观、简洁的方式展示未来六个月的日期，方便用户选择合适的入住日期。这个小程序结合了日历功能与酒店预订服务，是提升用户...
微信小程序：酒店订房之时间选择器 picker
weixin_33701564的博客
06-27 694
下单页面，选择开始日期和结束日期，不废话，直接代码： 1、wxml： &lt;picker mode="date" value="{{date1}}" start="2010-01-01" end="2030-12-31" bindchange="bindDateChange"&gt; &lt;view class="form_group"&g
小程序 机票火车票酒店 开始日期结束日期选择 日历组件
oMoShiMoWang12345678的博客
12-24 848
github:https://github.com/xiaoyangyang-code/calendar 码云:https://gitee.com/xiaoyang688/calendar ##先看一下大概样式 默认选中为今天: ###单选模式: ###双选模式 isDoubleSelection=true: 功能说明: 支持双选或单选日期或开始日期和结束日期的选择! 正好公司做火车票飞机票...
小程序弹窗时间选择器
lxp997的博客
09-03 1830
项目连接:https://github.com/18379259382/WXprocedure-
微信小程序实现酒店预订选择日期功能
weixin_43420598的博客
07-23 3300
小程序选择酒店入住时间及离店时间功能开发，带节假日及选择高亮功能，日期格式: ‘2020-07-23’ wxml： <view style="position:fixed;top:0;background:#F5F5F5;font-size: 30rpx; padding-top: 10rpx;padding-bottom: 10rpx;"> <view class="layout-flex row" style="background-color: #F5F5F5;"> &l
教你如何写一个符合自己需求的小程序日历组件
Noah_ZX的博客
12-09 4106
很多时候，我们生活中会有各种打卡的情况，比如 keep 的运动打卡、单词的学习打卡和各种签到打卡或者酒店的入住时间选择，这时候就需要我们书写一个日历组件来处理我们这种需求。但是更多时候，我们都是网上找一个插件直接套用了，有没有想过自己实现一下呢？如果有，但是感觉不太会的话，接下来跟着我一起实现符合自己需求的日历吧。
微信小程序日历的预订系统
ashcn2001的博客
08-28 1592
废话不多说,从晚上摘了一个日历,修改为可预订系统 ,现在记录一下备忘,我已经把这个日历系统定制为组件,以便以后方便调用. calendar文件夹下 的三个文件为 calendar.js // components/calendar/calendar.js Component({ /** * 组件的属性列表 */ properties: { workDayNum: { // 激活几个工作日 type: Number, value: 7
微信小程序－vant-weapp日历组件的使用（年月日）
前端视听
06-29 1918
小程序vant-weapp的日历组件的使用 话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：https://github.com/youzan/vant-weapp 中文文档：https://youzan.github.io/vant-weapp/#/intro 1：打开微信开发者工具，填写自己的appid和项目名称，选择不使用云服务，新建一个项目。 2：右击在选择在终端打开 进入项目的根目录底下，注意，一定要进入根目录哦，使用c
微信小程序滑动日历实现思路
2202_75483062的博客
03-13 2483
因为代码的篇幅比较大，所以没有粘贴全部，只是一部分，详细的代码可见小程序业务组件日历。github里面的组件目前只是单纯的提供日历的显示，暂时还没有提供获取后端数据并且格式化的方法，这个可自行添加，也可以在切换月份的时候回调事件处理。组件整体的效果变现为：来源：转自微信开发社区。
微信小程序picker写日期组件
05-05
可以使用小程序中的picker组件来实现日期选择器，具体方法如下： 1. 在wxml文件中添加picker组件代码，设置mode为date： ``` {{date}} ``` 2. 在js文件中定义日期选择器需要用到的变量，包括startDate、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值