小程序酒店预订日期组件

本插件在原作者（转载地址：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.currentObjvar Y = currentObj.getFullYear();var m = currentObj.getMonth() + 1;var d = currentObj.getDate();var str = ''if (e.currentTarget.dataset.key == 'left') {m -= 1if (m <= 0) {str = (Y - 1) + '/' + 12 + '/' + d} else {str = Y + '/' + m + '/' + d}} else {m += 1if (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.currentObjif (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 = thisvar m = currentObj.getMonth() + 1var 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() + 1var result = currentDayWeek - (d % 7 - 1);var firstKey = result <= 0 ? 7 + result : result;var currentDayList = [];var f = 0for (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})},//选择具体日期方法--xzz1211selectDay: function (e) {var that = this;console.log(e);var starDate = '',endDate = '',that = this,countDate = ''var select = this.data.selectvar obj = {}obj.month = this.data.currentMonthobj.date = e.target.dataset.dayif (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

小程序酒店预订日期组件相关推荐

小程序酒店预定日期选择
小程序酒店预定日期选择需求说明 js源码 html代码 css代码版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 原文链接:https:/ ...
微信小程序酒店预订,酒店预订小程序,微信小程序民宿预订系统毕设作品
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序酒店预订系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加房间,用户通过小程序登录,查看房间.选 ...
案例-做一个酒店预定小程序用的日期选择案例
今天给大家分享一个酒店预定小程序用的日期选择案例,我是做的支付宝小程序,如果需要应用到微信小程序,请将相关字眼改成微信用的字眼,比如onTap改bindtap,a:if或者a:for改成wx:if和w ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）
获取当前系统日期和时间在小程序中,新建项目时,就会有一个utils.js文件,就是获取日期和时间的,代码如下: utils.js: function formatTime(date) {var ye ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
微信小程序引入骨架屏组件
微信小程序引入骨架屏组件参考地址:https://github.com/cytle/ma-skeleton.git 1.克隆项目 2.把项目里的组件skeleton文件复制到自己的项目里 3.复制& ...

小程序酒店预订日期组件

小程序酒店预订日期组件相关推荐

最新文章

热门文章