当前位置：网站首页>Date selection of hotel check-in time and check-out time
Date selection of hotel check-in time and check-out time
2022-06-23 17:25:00 【_ Lan】
design sketch ：
1, Click time to jump to the page
2, Select the date of check-in time and check-out time
Code logic ：
1, Layout ;
2,js Logic ;
/** Life cycle function -- Monitor page loading */
onLoad: function (options) {
// Set cache , Cached date
wx.setStorage({
key: 'ROOM_SOURCE_DATE',
data: {
checkInDate: getToDay().currentDate,
checkOutDate: getToDay().future
}
});
},
/** Life cycle function -- Monitor page display */
onShow: function () {
let getDate = wx.getStorageSync("ROOM_SOURCE_DATE");
this.setData({
checkInDate: getDate.checkInDate,
checkOutDate: getDate.checkOutDate
})
},
3, Check in date and departure date selection page ：/pages/calendar/index;
1,index.wxml;
<!-- Hotel reservation date selection -->
<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;">
<text class="date-week" style="width:{ {systemInfo.windowWidth/7-10}}px;height:20px" wx:for="{ {weekStr}}" wx:key="{ {index}}">
<text wx:if="{ {item !==' Japan ' && item !==' 6、 ... and '}}">{ {item}}</text>
<text wx:if="{ {item ===' Japan ' || item ===' 6、 ... and '}}" class="week">{ {item}}</text>
</text>
</view>
</view>
<view style="margin-top:50px"></view>
<view wx:for="{ {dateList}}" wx:key="{ {index}}" wx:for-item="dateItem" style="padding:30rpx 0">
<view class="date-year-month" style="text-align: center;font-size:35rpx;">{ {dateItem.year}} year { {dateItem.month}} month </view>
<view class="layout-flex row" style="flex-wrap: wrap;margin-top:30rpx;">
<view class="date-day { {item.day<=0?'bgwhite':item.class}}" style="width:{ {systemInfo.windowWidth/7-10}}px;height:{ {systemInfo.windowWidth/7}}px;" data-year="{ {dateItem.year}}" data-month="{ {dateItem.month}}" data-day="{ {item.day}}" bindtap="onPressDate" wx:for="{ {dateItem.days}}" wx:key="{ {index}}">
<view class='item-days'>
<text style='font-size:28rpx;'>{ {item.day>0?(item.daytext?item.daytext:item.day):''}}</text>
<text style='font-size:30rpx;' wx:if="{ {item.inday}}"> To stay in </text>
<text style='font-size:30rpx;' wx:if="{ {item.outday}}"> Check out </text>
</view>
</view>
</view>
</view>
2,index.js;
import { getToDay } from "../../utils/date"; // Package year month day hour minute second ;
var DATE_LIST = [];
var DATE_YEAR = new Date().getFullYear();
var DATE_MONTH = new Date().getMonth() + 1;
var DATE_DAY = new Date().getDate();
Page({
data: {
maxMonth: 7, // Maximum rendering months
dateList: [],
systemInfo: {},
weekStr: [' Japan ', ' One ', ' Two ', ' 3、 ... and ', ' Four ', ' 5、 ... and ', ' 6、 ... and '],
checkInDate: getToDay().currentDate,
checkOutDate: getToDay().future,
markcheckInDate: false, // Whether the mark start time has been selected
markcheckOutDate: false, // Whether the tag end time has been selected
sFtv: [
{
month:1,
day:1,
name:" New year's Day "
},
{
month: 2,
day: 14,
name: " Valentine's Day "
},
{
month: 3,
day: 8,
name: " Women's Day "
},
{
month: 3,
day: 12,
name: " Arbor Day "
},
{
month: 3,
day: 15,
name: " Consumer rights day "
},
{
month: 4,
day: 1,
name: " April Fools ' Day "
},
{
month: 5,
day: 1,
name: " labor day "
},
{
month: 5,
day: 4,
name: " Youth Day "
},
{
month: 5,
day: 12,
name: " Nurse's Day "
},
{
month: 6,
day: 1,
name: " Children's Day "
},
{
month: 7,
day: 1,
name: " Party building day "
},
{
month: 8,
day: 1,
name: " Army Day "
},
{
month: 9,
day: 10,
name: " Teachers ' Day "
},
{
month: 9,
day: 28,
name: " Confucius' birthday "
},
{
month: 10,
day: 1,
name: " National Day "
},
{
month: 10,
day: 6,
name: " Seniors ' Day "
},
{
month: 10,
day: 24,
name: " United Nations Day "
},
{
month: 12,
day: 24,
name: " On Christmas Eve "
},
{
month: 12,
day: 25,
name: " Christmas "
}
]
},
onLoad: function (options) {
// Page initialization options Parameters for page Jump
this.createDateListData();
var _this = this;
// Page initialization options Parameters for page Jump
var checkInDate = options.checkInDate ? options.checkInDate : getToDay().currentDate;
var checkOutDate = options.checkOutDate ? options.checkOutDate : getToDay().future;
wx.getSystemInfo({
success: function (res) {
_this.setData({ systemInfo: res, checkInDate: checkInDate, checkOutDate: checkOutDate });
}
})
},
onReady: function () { // Page rendering complete
},
onShow: function () {
this.selectDataMarkLine()
},
onHide: function () { // Page hidden
},
onUnload: function () { // Page closing
},
// Selected check-in and check-out periods
selectDataMarkLine: function () {
let dateList = this.data.dateList;
let { checkInDate, checkOutDate } = wx.getStorageSync("ROOM_SOURCE_DATE");
let curreInid = checkInDate.substr(0, 4) + "-" + (checkInDate.substr(5, 2) < 10 ? checkInDate.substr(6, 1) : checkInDate.substr(5, 2));// Choose to stay id
let curreOutid = checkOutDate.substr(0, 4) + "-" + (checkOutDate.substr(5, 2) < 10 ? checkOutDate.substr(6, 1) : checkOutDate.substr(5, 2));// Choose a check-out id
let dayIn = checkInDate.substr(8, 2) >= 10 ? checkInDate.substr(8, 2) : checkInDate.substr(9, 1); // Select the day of stay id
let dayOut = checkOutDate.substr(8, 2) >= 10 ? checkOutDate.substr(8, 2) : checkOutDate.substr(9, 1); // Select the day of departure id
let monthIn = checkInDate.substr(5, 2) >= 10 ? checkInDate.substr(5, 2) : checkInDate.substr(6, 1); // Select the month of entry id
let monthOut = checkOutDate.substr(5, 2) >= 10 ? checkOutDate.substr(5, 2) : checkOutDate.substr(6, 1); // Select the month of departure id
if (curreInid == curreOutid) { // Check in and check out are the conditions of the month
for (let i = 0; i < dateList.length; i++) {
if (dateList[i].id == curreInid) {
let days = dateList[i].days;
for (let k = 0; k < days.length; k++) {
if (days[k].day >= dayIn && days[k].day <= dayOut) {
days[k].class = days[k].class + ' bgitem';
}
if (days[k].day == dayIn) {
days[k].class = days[k].class + ' active';
days[k].inday = true;
}
if (days[k].day == dayOut) {
days[k].class = days[k].class + ' active';
days[k].outday = true;
}
}
}
}
} else { // extend into next month
for (let j = 0; j < dateList.length; j++) {
if (dateList[j].month == monthIn) { // Start month of stay
let days = dateList[j].days;
for (let k = 0; k < days.length; k++) {
if (days[k].day >= dayIn) {
days[k].class = days[k].class + ' bgitem';
}
if (days[k].day == dayIn) {
days[k].class = days[k].class + ' active';
days[k].inday = true;
}
}
} else { // Stay in another month
if (dateList[j].month < monthOut && dateList[j].month > monthIn) { // The month in the middle of departure
let days = dateList[j].days;
for (let k = 0; k < days.length; k++) {
days[k].class = days[k].class + ' bgitem';
}
} else if (dateList[j].month == monthOut) { // Last month of departure
let days = dateList[j].days;
for (let k = 0; k < days.length; k++) {
if (days[k].day <= dayOut) {
days[k].class = days[k].class + ' bgitem';
}
if (days[k].day == dayOut) {
days[k].class = days[k].class + ' active';
days[k].outday = true;
}
}
}
}
}
}
this.setData({
dateList: dateList
})
},
createDateListData: function () {
var dateList = [];
var now = new Date();
/* Set the date to year - month -01, Otherwise, cross month problems may occur , such as ：2017-01-31 by now , Month direct +1（now.setMonth(now.getMonth()+1)）, Will jump directly to 2017-03-03 month , The reason is that 2 No month 31 Number , It turns into 03-03 */
now = new Date(now.getFullYear(), now.getMonth(), 1);
for (var i = 0; i < this.data.maxMonth; i++) {
var momentDate = getToDay().date;
momentDate.setMonth(momentDate.getMonth() + i); // In the future 7 Month
var year = momentDate.getFullYear();
var month = momentDate.getMonth() + 1;
var days = [];
var totalDay = this.getTotalDayByMonth(year, month);
var week = this.getWeek(year, month, 1);
//-week This is to make the date of the first day of the month correctly displayed on the corresponding position of the week , Like Wednesday (week = 2),
// Then... Of that month 1 No. is rendered from the third position of the column , The front will occupy -2,-1,0 The location of , from 1 Turn on normal rendering
for (var j = -week + 1; j <= totalDay; j++) {
var tempWeek = -1;
if (j > 0)
tempWeek = this.getWeek(year, month, j);
var clazz = '';
if (tempWeek == 0 || tempWeek == 6)
clazz = 'week'
if (j < DATE_DAY && year == DATE_YEAR && month == DATE_MONTH)
// Dates before the current day are not available
clazz = 'unavailable ' + clazz;
else
clazz = '' + clazz
days.push({ day: j, class: clazz })
}
var dateItem = {
id: year + '-' + month,
year: year,
month: month,
days: days
}
dateList.push(dateItem);
}
var sFtv = this.data.sFtv;
for (let i = 0; i < dateList.length; i++){ // Join the Gregorian calendar Festival
for(let k = 0; k < sFtv.length; k++){
if (dateList[i].month == sFtv[k].month){
let days = dateList[i].days;
for (let j = 0; j < days.length; j++){
if (days[j].day == sFtv[k].day){
days[j].daytext = sFtv[k].name
}
}
}
}
}
this.setData({
dateList: dateList
});
DATE_LIST = dateList;
},
/* Get the total number of days in the month */
getTotalDayByMonth: function (year, month) {
month = parseInt(month, 10);
var d = new Date(year, month, 0);
return d.getDate();
},
/* The first day of the month is the day of the week */
getWeek: function (year, month, day) {
var d = new Date(year, month - 1, day);
return d.getDay();
},
/** Click on the date event */
onPressDate: function (e) {
var { year, month, day } = e.currentTarget.dataset;
// The currently selected date is the same month and less than today , Or click on the blank space （ namely day<0）, Don't execute
if ((day < DATE_DAY && month == DATE_MONTH) || day <= 0 ) return;
var tempMonth = month;
var tempDay = day;
if (month < 10) tempMonth = '0' + month
if (day < 10) tempDay = '0' + day
var date = year + '-' + tempMonth + '-' + tempDay;
// If you click the selected date A Less than the check-in time , Then the re rendering check-in time is A
if ((this.data.markcheckInDate && new Date(date).getTime() < new Date(this.data.checkInDate).getTime() || this.data.checkInDate === date)) {
this.setData({
markcheckInDate: false,
markcheckOutDate: false,
dateList: DATE_LIST.concat()
});
};
if (!this.data.markcheckInDate) {
this.setData({
checkInDate: date,
markcheckInDate: true,
dateList: DATE_LIST.concat()
});
} else if (!this.data.markcheckOutDate) {
this.setData({
checkOutDate: date,
markcheckOutDate: true,
});
// Enter the store , The departure date must be 30 Days.
let today = (Date.parse(this.data.checkOutDate) - Date.parse(this.data.checkInDate))/(1*24*60*60*1000);
// if(today > 30) {
// wx.showModal({ title: ' Tips ', content: ' I'm sorry , We only accept 30 Reservation within days ', showCancel: false })
// this.setData({ markcheckOutDate: false })
// return;
// }
// Set cache , When you return to the page , Can be found in onShow Get cached date when
wx.setStorage({
key: 'ROOM_SOURCE_DATE',
data: {
checkInDate: this.data.checkInDate,
checkOutDate: this.data.checkOutDate,
night:today
}
});
wx.navigateBack({
delta: 1, // Before going back delta( The default is 1) page
});
}
this.renderPressStyle(year, month, day);
},
renderPressStyle: function (year, month, day) {
this.createDateListData(); // Data initialization when clicking again
var dateList = this.data.dateList;
// Render click style
for (var i = 0; i < dateList.length; i++) {
var dateItem = dateList[i];
var id = dateItem.id;
if (id === year + '-' + month) {
var days = dateItem.days;
for (var j = 0; j < days.length; j++) {
var tempDay = days[j].day;
if (tempDay == day) {
days[j].class = days[j].class + ' active';
days[j].inday = true;
break;
}
}
break;
}
}
this.setData({
dateList: dateList
});
}
})
3,index.json;
4,index.wxss;
.date-day{
display: flex;
padding:5px;
text-align:center;
justify-content: center;
align-items: center;
flex-direction: column;
}
.date-day.bgitem{
background-color: #ffd3cb;
}
.date-day.active{
background: #F2573D;
color:#FFF;
}
.date-day.unavailable{
color:#aaa;
}
.date-week{
display: flex;
justify-content: center;
align-content: center;
margin:5px;
}
.week{
color:#F2573D;
}
.row{
display: flex;
flex-direction: row;
}
.item-days{
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
font-size: 35rpx;
}
.bgwhite{
background-color: #fff;
}
4, Year, day, hour, minute and second packaging ;
/** Split date format */
export function formatTime(date) {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day ,hour, minute, second].map(formatNumber)
}
/** Interception date */
export function formatDate( time_ , format_ ) {
const date = time_.split(" ");
const dateArr = date[0].split("-");
const timeArr = date[1].split(":");
switch (format_) {
case 'yy-mm':
return `${ dateArr[0] }-${ dateArr[1] }`
break;
case 'yy-mm-dd':
return `${ dateArr[0] }-${ dateArr[1] }-${ dateArr[2] }`
break;
case 'yy-mm-dd hh:mm':
return `${ dateArr[0] }-${ dateArr[1] }-${ dateArr[2] } ${ timeArr[0] }:${ timeArr[1] }`
break;
default: return false; break;
}
}
/** Convert the time difference into hh:mm Format */
export function calculateTime( s_ , e_ , format) {
let s_times = new Date(s_.replace(/-/g,'/').replace(/-/g,'/')).getTime();
let e_times = new Date(e_.replace(/-/g,'/').replace(/-/g,'/')).getTime();
let durs = ( e_times - s_times );
let hour = durs/1000/60/60;
hour = Math.floor(hour);
let minute = Math.floor((durs - hour*1000*60*60)/1000/60);
let second = Math.floor((durs - hour*1000*60*60 - minute*1000*60)/1000);
return [hour,minute,second].map(formatNumber)
}
// format
function formatNumber(n) {
n = n.toString()
return n.length >= 2 ? n : '0' + n
}
/** Get today's date */
export function getToDay() {
let date = new Date();
let y = date.getFullYear();
let m = date.getMonth() + 1;
let d = date.getDate();
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
date.setDate(date.getDate() + 1); // Future days 1 For tomorrow ,2,3,4,5 It represents the next few days
let yyy = date.getFullYear();
let mmm = date.getMonth() + 1;
let ddd = date.getDate();
let today = `${ y }-${ formatNumber(m) }-${ formatNumber(d) }`; // Specific date
let currentDate = `${ y }-${ formatNumber(m) }-${ formatNumber(d) }`; // The current date
let future = `${ yyy }-${ formatNumber(mmm) }-${ formatNumber(ddd) }`; // Future dates
let n = today + ` ${ formatNumber(hh) }:${ formatNumber(mm) }:${ formatNumber(ss) }`; // current time
return {
date,
y,
m,
d,
currentDate,
future,
today,
hh,
mm,
n
}
}
边栏推荐
- [go] calling Alipay to scan code for payment in a sandbox environment
- How to configure MySQL log management
- R language uses timeroc package to calculate the multi time AUC value of survival data in the case of no competition, uses Cox model, adds covariates, and visualizes the multi time ROC curve of surviv
- QT layout manager [qvboxlayout, qhboxlayout, qgridlayout]
- Jetpack compose and material you FAQs
- Here comes the official zero foundation introduction jetpack compose Chinese course!
- 美团三面：聊聊你理解的Redis主从复制原理？
- 【网络通信 -- WebRTC】WebRTC 源码分析 -- PacingController 相关知识点补充
- Tupu digital twin 3D wind farm, offshore wind power of smart wind power
- TensorRT Paser加载onnx 推理使用
猜你喜欢
![[network communication -- webrtc] source code analysis of webrtc -- bandwidth estimation at the receiving end](/img/b0/97dbf3d07a4ed86d6650a58a97a5fc.png)
[network communication -- webrtc] source code analysis of webrtc -- bandwidth estimation at the receiving end
Troubleshooting of datanode entering stale status
ASEMI超快恢复二极管ES1J参数，ES1J封装，ES1J规格
《MPLS和VP体系结构》
TensorRT Paser加载onnx 推理使用
Mathematical analysis_ Certification_ Chapter 1: the union of countable sets is countable
元宇宙带来的社会结构和资本制度演变
Opengauss database source code analysis series articles -- detailed explanation of dense equivalent query technology (Part 1)
QT布局管理器【QVBoxLayout，QHBoxLayout，QGridLayout】
官方零基础入门 Jetpack Compose 的中文课程来啦！
随机推荐
ABAP essay - material master data interface enhancement
Get first and last days by year
ADC digital DGND, analog agnd mystery!
The connection between supply and demand will no longer depend on the platform and center of the Internet Era
电感参数有哪些？怎么选择电感？
酒店入住时间和离店时间的日期选择
Tupu software builds smart city with lightweight modeling
TensorRT Paser加载onnx 推理使用
股票网上开户及开户流程怎样？在线开户安全么？
B. Integers Shop-Hello 2022
Query the size of each table in the database
查数据库中每张表的大小
JMeter stress testing tutorial
Innovative technology leader! Huawei cloud gaussdb won the 2022 authoritative award in the field of cloud native database
JS常见的报错及异常捕获
Identify and stop the process that's listening on port 8080 or configure this application
How to select an oscilloscope? These 10 points must be considered!
如何选择示波器？这10点一定要考虑！
What does the timestamp 90K mean?
《MPLS和VP体系结构》