当前位置：网站首页>Alipay native components (hotel time selection)
Alipay native components (hotel time selection)
2022-06-13 04:04:00 【Shadow night with the wind】
Recently, a function similar to flying pig hotel time selection is needed on Alipay applet. , But no suitable component was found , No way out , Only one can be made manually .
Alipay small program renderings are as follows
Component description ：
1、 The time before the current date is not optional
2、 The time range can be selected across months
Use in Alipay native PAGE
stay xxx.json Introduced components in
"calendar-select":"../../components/calender-select/calender-select"axml Use... In the document
<button size="default" type="primary" onTap="selectTime"> Selection time </button>
<calendar-select
maxDate="2022-6-30"
:addOrRemoveData="{
{addOrRemoveData}}"
mode="range"
value="{
{showCalendar}}"
:altPrice="{
{dataPrice}}"
onCloseFunc="closeFunc"
onTurnMsg="changeDate"></calendar-select>js in data data
closeFunc(){
this.setData({showCalendar:false})
},
selectTime(){
this.setData({showCalendar:true})
},
changeDate(data){
console.log(data,"]]]]] Return the data ]]]]]]")
},Calling method
closeFunc(){
this.setData({showCalendar:false})
},
selectTime(){
this.setData({showCalendar:true})
},
changeDate(data){
console.log(data,"]]]]] Return the data ]]]]]]")
},
Component code
components/calender-select/calender-select.axml
<view a:if="{
{value}}" class="calendar-body">
<view class="title-name" onTap="close">
{
{title}} <text class="iconfont icon-close-bold"></text>
</view>
<view a:if="{
{mode == 'range'}}" class="range-text">
<view class="left">
<view class="alt"> Check in date </view>
<view class="time">
<text>{
{startMonth}} month {
{startDay}} Japan </text> {
{startWeek}}
</view>
</view>
<view class="right">
<view class="alt"> Departure date </view>
<view class="time">
<text>{
{endMonth}} month {
{endDay}} Japan </text> {
{endWeek}}
</view>
</view>
</view>
<scroll-view class="day-list {
{ mode == 'range'?'day-range':''}}" scroll-y="true" :scroll-top="{
{scrollTop}}" onScrollToLower="changeMonthHandler" style="width: 100%;height:80vh">
<view class="day-item" a:for="{
{listData}}" a:for-item="item" a:key="itemIndex">
<view class="day-title">{
{item.showTitle}}</view>
<view class="week-list">
<view class="week-day__text" a:for="{
{weekDayZh}}" a:for-item="itemZh" a:key="indexZh">{
{itemZh}}</view>
</view>
<view class="content">
<!-- Leading white space -->
<block a:for="{
{item.weekdayArr}}" a:for-item="itemArr" a:key="indexArr">
<view class="item" ></view>
</block>
<!-- (openDisAbled(item.year, item.month, dayIndex+1)?'day-range' : '') -->
<!-- ( mode== 'date' && activeDate ==`${item.year}-${item.month}-${dayIndex+1}`?'activeData':'')
(mode == 'range' && startDate==`${item.year}-${item.month}-${dayIndex+1}`?'startDate':'')
( mode == 'range' && openStartOrend(item.year, item.month, dayIndex+1)?'startOrend':'')
( mode== 'range' && endDate==`${item.year}-${item.month}-${dayIndex+1}`?'endDate':'') -->
<view a:for="{
{item.daysArr}}" a:for-item="dayItem" a:key="dayItem"
class="item {
{item.showBoolArr[dayItem-1]==false?'gray-color':''}}
{
{mode == 'range' && item.showBoolArr[dayItem]=='false'?'day-range':''}}
{
{ mode== 'date' && activeDate ==`${item.year}-${item.month}-${dayItem}`?'activeData':''}}
{
{mode == 'range' && startDate==`${item.year}-${item.month}-${dayItem}`?'startDate':''}}
{
{ mode == 'range' &&item.newDaysBoolArr[dayItem-1] ?'startOrend':''}}
{
{mode== 'range' && endDate==`${item.year}-${item.month}-${dayItem}`?'endDate':''}}"
data-item={
{item}}
data-index={
{dayItem-1}}
data-faItem={
{item.daysArr}}
data-showbool={
{item.showBoolArr[dayItem-1]}}
onTap="dateClick">
<view class="number {
{item.showBoolArr[dayItem-1]==false?'gray-color':''}}">{
{ dayItem }}</view>
<view class="number">{
{mode == 'range' && startDate==`${item.year}-${item.month}-${dayItem}`?' To stay in ':'' }}</view>
<view class="number">{
{mode == 'range' && endDate==`${item.year}-${item.month}-${dayItem}`?' Check out ':'' }}</view>
</view>
</view>
</view>
</scroll-view>
</view>components/calender-select/calender-select.js
Component({
mixins: [],
data: {
scrollTop: 0,
datePrice: [],
// What day , The value is 1-7
weekday: 1,
weekdayArr:[],
// How many days are there in the current month
days: 0,
daysArr:[],
showTitle: '',
year: 2020,
month: 0,
day: 0,
startYear: 0,
startMonth: 0,
startDay: 0,
startWeek: '',
endYear: 0,
endMonth: 0,
endDay: 0,
endWeek: '',
today: '',
activeDate: '',
startDate: '',
endDate: '',
isStart: true,
min: null,
max: null,
weekDayZh: [' Japan ', ' One ', ' Two ', ' 3、 ... and ', ' Four ', ' 5、 ... and ', ' 6、 ... and '],
listData:[],
startDateTime:"",// The current time is
endDateTime:""
},
props: {
// Control the pop-up and retraction of components through two-way binding
value: false,
// date- Single date selection ,range- Start date + End date selection
mode: 'date',
// Date select title
title: ' You can check the reservation date ',
// Minimum order date ( Date out of range disabled not optional , Include day )
minDate: '2022-01-01',
// Maximum order date ( Date out of range disabled not optional , Include day )
maxDate: '2022-05-22',
// Are Saturdays and Sundays prohibited Do not place an order By default... Is not prohibited
isWeekend: false,
// Tips displayed every day
altPrice: [{
date: '2022-01-01',
price: ''
}],
// Check in departure date
addOrRemoveData: []
},
didMount() {
this.data.timestamp =new Date().getTime();
this.init()
},
didUpdate(a,b) {
console.log(a,"=======",b)
// if(a.mode!=b.mode|| a.minDate!=b.minDate||a.maxDate!=b.maxDate){
// this.init()
// }
// When the data is updated , Get check-in and check-out again at the wrong time
let startDateTime = this.data.startDate.replace(/\-/g, '/');
let endDateTime = this.data.endDate.replace(/\-/g, '/');
this.data.startDateTime = startDateTime;
this.data.endDateTime = endDateTime;
},
deriveDataFromProps(nextProps) {
if (JSON.stringify(this.data.itemData) !== JSON.stringify(this.data.itemData)) {
// Business processing
this.init()
}
},
didUnmount() {},
methods: {
init() {
/// Initialization date
let now = new Date();
this.setData({
// Under initialization date written words
datePrice : this.props.altPrice,
year : now.getFullYear(),
month : now.getMonth() + 1,
day : now.getDate(),
today : `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`,
activeDate : this.props.today,
min : this.initDate(this.props.minDate),
max :this.initDate(this.props.maxDate || this.props.today),
startDate : "",
startWeek: "",
startYear : 0,
startMonth : 0,
startDay : 0,
endYear : 0,
endMonth :0,
endDay : 0,
endDate : "",
endWeek :"",
isStart : true,
listData : [],
selectList:[]
})
this.changeData();
// Two months by default
let _this = this
setTimeout(() => {
_this.changeMonthHandler(1)
}, 100)
setTimeout(() => {
_this.changeMonthHandler(1)
}, 2000);
// Initialize check-in and check-out time
if (this.props.addOrRemoveData.length > 0) {
setTimeout(() => {
_this.addOrRemoveChange()
}, 200)
}
},
// Date processing
initDate(date) {
console.log(date,"=====")
let fdate = date.split('-');
return {
year: Number(fdate[0] || 2022),
month: Number(fdate[1] || 1),
day: Number(fdate[2] || 1)
}
},
// Determine the available date range
openDisAbled(year, month, day) {
let bool = true;
let date = `${year}/${month}/${day}`;
let today = this.data.today.replace(/\-/g, '/');
let min = `${this.data.min.year}/${this.data.min.month}/${this.data.min.day}`;
let max = `${this.data.max.year}/${this.data.max.month}/${this.data.max.day}`;
let timestamp = new Date(date).getTime();
console.log(min,max)
if (timestamp < new Date(min).getTime() || timestamp > new Date(max).getTime()) {
bool = false;
my.showToast({content:" The selected time is out of range "})
console.log(' The selected time is out of range ')
}
// Judge whether it is greater than today
if (timestamp < new Date(today).getTime()) {
console.log(" The selected time cannot be less than the current time ")
bool = false;
}
// No orders placed on Saturdays and Sundays
if (this.isWeekend && (this.getWeekText(date) === ' Saturday ' || this.getWeekText(date) === ' Sunday ')) {
bool = false;
}
return bool;
},
// Judge whether to re select the date range
openStartOrend(year, month, day) {
let bool = false;
let date = `${year}/${month}/${day}`;
let startDate = this.data.startDate.replace(/\-/g, '/');
let endDate = this.data.endDate.replace(/\-/g, '/');
let timestamp = new Date(date).getTime();
if (timestamp > new Date(startDate).getTime() && timestamp < new Date(endDate).getTime()) {
bool = true
}
return bool
},
// Display text prompt under date
viewDayAlt(year, month, day) {
console.log(" Display text prompt under date ")
let txt = ''
let item = this.data.datePrice.find(item => {
let today = item.date.replace(/\-/g, '/');
let date = `${year}/${month}/${day}`;
return new Date(date).getTime() === new Date(today).getTime()
})
if (item) {
return Number.isFinite(item.price) ? '￥' + item.price : item.price
}
},
generateArray(start, end) {
return Array.from(new Array(end + 1).keys()).slice(start);
},
formatNum(num) {
return num < 10 ? '0' + num : num + '';
},
// How many days are there in a month
getMonthDay(year, month) {
let days = new Date(year, month, 0).getDate();
return days;
},
getWeekday(year, month) {
let date = new Date(`${year}/${month}/01 00:00:00`);
return date.getDay();
},
checkRange(year) {
let overstep = false;
if (year < this.minYear || year > this.maxYear) {
uni.showToast({
title: " The date is out of range ~",
icon: 'none'
})
overstep = true;
}
return overstep;
},
//scorllview Touch bottom
changeMonthHandler(isAdd) {
console.log(isAdd,"isAddisAddisAdd")
if (isAdd) {
// Display according to date limit
if (this.data.year >= this.data.max.year && this.data.month >= this.data.max.month) {
console.log(false)
return false
}
let month = this.data.month + 1;
let year = month > 12 ? this.data.year + 1 : this.data.year;
if (!this.checkRange(year)) {
console.log("checkRangecheckRange")
this.data.month = month > 12 ? 1 : month;
this.data.year = year;
this.changeData();
}
} else {
let month = this.month - 1;
let year = month < 1 ? this.year - 1 : this.year;
if (!this.checkRange(year)) {
console.log("checkRangecheckRangeerrrrrr")
this.data.month = month < 1 ? 12 : month;
this.data.year = year;
this.changeData();
}
}
},
changeYearHandler(isAdd) {
let year = isAdd ? this.year + 1 : this.year - 1;
if (!this.checkRange(year)) {
this.data.year = year;
this.changeData();
}
},
changeData() {
this.data.days = this.getMonthDay(this.data.year, this.data.month);
this.data.daysArr=this.generateArray(1,this.data.days)
this.data.weekday = this.getWeekday(this.data.year, this.data.month);
this.data.weekdayArr=this.generateArray(1,this.data.weekday)
this.data.showTitle = `${this.data.year} year ${this.data.month} month `;
if (this.data.isChange && this.data.mode == 'date') {
this.btnFix(true);
}
this.setDayText()
},
// Processing insert data time list
setDayText() {
console.log(" Number of inserts ==",this.data.listData)
let daysArr = this.data.daysArr;
let year = this.data.year;
let month = this.data.month;
let newDaysBoolArr = [];// Control the color
let showBoolArr = [];// Controls whether you can click
daysArr.map(item=>{
let day = item>9?item:"0"+item;
showBoolArr.push(this.openDisAbledBool(year,month,day))
newDaysBoolArr.push(false)
})
let listData = this.data.listData;
listData.push({
year: this.data.year,
month: this.data.month,
weekdayArr: this.data.weekdayArr,
daysArr: this.data.daysArr,
showTitle: this.data.showTitle,
newDaysBoolArr:newDaysBoolArr,
showBoolArr:showBoolArr
})
this.setData({
listData
})
},
// Judge whether the date is non clickable
openDisAbledBool(year, month, day) {
let bool = true;
let date = `${year}/${month}/${day}`;
let timestamp = new Date(date).getTime();
let today = this.data.today.replace(/\-/g, '/');
if (timestamp < new Date(today).getTime()) {
bool = false;
}
return bool;
},
// Process initialization check-in and check-out time
addOrRemoveChange() {
let _this = this
this.addOrRemoveData.forEach((item, index) => {
let data = item.replace(/\-/g, '/')
let now = new Date(data);
let year = now.getFullYear();
let month = now.getMonth() + 1;
let day = now.getDate() - 1;
if (index === 0) {
this.dateClick({year: year, month: month }, day)
} else {
setTimeout(() => {
_this.dateClick({year: year, month: month }, day)
}, 300)
}
})
},
// Select a date action
dateClick(evt) {
let {item,index:day,showbool} = evt.target.dataset;
let listData = this.data.listData;
if(!showbool) return false;
// item, day
day += 1;
if (this.openDisAbled(item.year, item.month, day)) {
this.data.day = day;
let date = `${item.year}-${item.month}-${day}`;
if (this.data.mode == 'date') {
console.log(" Select only one time ")
this.data.activeDate = date;
this.btnFix(true)
} else {
console.log(" Choose start and check out 2 Time ")
let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.data.startDate.replace(/\-/g, '/')).getTime()
if (this.data.isStart || compare) {
console.log(" Choose a start time ")
this.setData({
startDate:date,
listData,
startYear:item.year,
startMonth:item.month,
startDay:day,
endYear:0,
endMonth:0,
endDay:0,
endDate:"",
activeDate:"",
startWeek:this.getWeekText(date),
isStart:false,
datePrice:[{
date: date,
price: ' To stay in '
}]
})
// Delete selection area
this.resetListData(listData,2)
} else {
console.log(" Choose the departure time ")
this.setData({
endDate:date,
endYear:item.year,
endMonth:item.month,
endDay:day,
endWeek:this.getWeekText(date),
isStart:true,
datePrice:this.data.datePrice.push({
date: date,
price: ' Leave '
})
})
// Set selection area
this.resetListData(listData,1)
// Whether to manually close the time component and return data
this.btnFix(true)
}
}
}
},
// Set selection area color
resetListData(listData,type){
listData.forEach((firstItem,firstIndex)=>{
if(type==2){
firstItem.newDaysBoolArr.forEach((subItem,subindex)=>{
listData[firstIndex].newDaysBoolArr[subindex]=false;
})
}else{
firstItem.daysArr.forEach((subItem,subindex)=>{
if(this.openStartOrend(firstItem.year,firstItem.month,subItem)){
listData[firstIndex].newDaysBoolArr[subindex]=true;
}
})
}
})
console.log(listData)
this.setData({
listData:listData
})
},
close() {
this.data.scrollTop = 0
// Modify the value of the bound parent component variable to false, This hides the calendar pop-up window
this.props.onCloseFunc(false);
},
getWeekText(date) {
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
let week = date.getDay();
return ' week ' + [' Japan ', ' One ', ' Two ', ' 3、 ... and ', ' Four ', ' 5、 ... and ', ' 6、 ... and '][week];
},
btnFix(show) {
if (!show) {
this.close();
}
if (this.data.mode == 'date') {
let arr = this.data.activeDate.split('-')
let year = this.data.isChange ? this.data.year : Number(arr[0]);
let month = this.data.isChange ? this.data.month : Number(arr[1]);
let day = this.data.isChange ? this.data.day : Number(arr[2]);
// How many days are there in the current month
let days = this.getMonthDay(year, month);
let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
let weekText = this.getWeekText(result);
let isToday = false;
if (`${year}-${month}-${day}` == this.data.today) {
// today
isToday = true;
}
this.props.onTurnMsg({
year: year,
month: month,
day: day,
days: days,
activeDate: this.data.activeDate,
result: result,
week: weekText,
isToday: isToday
});
} else {
if (!this.data.startDate || !this.data.endDate) return;
let startMonth = this.formatNum(this.data.startMonth);
let startDay = this.formatNum(this.data.startDay);
let startDate = `${this.data.startYear}-${startMonth}-${startDay}`;
let startWeek = this.getWeekText(startDate)
let endMonth = this.formatNum(this.data.endMonth);
let endDay = this.formatNum(this.data.endDay);
let endDate = `${this.data.endYear}-${endMonth}-${endDay}`;
let endWeek = this.getWeekText(endDate);
this.props.onTurnMsg({
startYear: this.data.startYear,
startMonth: this.data.startMonth,
startDay: this.data.startDay,
startDate: startDate,
startWeek: startWeek,
endYear: this.data.endYear,
endMonth: this.data.endMonth,
endDay: this.data.endDay,
endDate: endDate,
endWeek: endWeek
})
}
}
},
});
components/calender-select/calender-select.acss
.calendar-body {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
background-color: #fafafa;
-webkit-animation: fadelogIn-data-v-7570169f 0.4s;
animation: fadelogIn-data-v-7570169f 0.4s;
z-index: 9;
}
.calendar-body .title-name {
font-size: 36rpx;
font-weight: 500;
line-height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 24rpx;
background-color: #fafafa;
}
.calendar-body .title-name .icon-close-bold {
position: absolute;
top: 24rpx;
right: 24rpx;
width: 40rpx;
height: 40rpx;
font-size: 40rpx;
color: #999;
}
.calendar-body .range-text {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24rpx;
}
.calendar-body .range-text .alt {
font-size: 24rpx;
color: #303030;
}
.calendar-body .range-text .time {
font-size: 24rpx;
color: #666;
}
.calendar-body .range-text .time text {
font-size: 36rpx;
color: #000;
}
.calendar-body .range-text .right {
text-align: right;
}
.calendar-body .day-list {
padding: 24rpx;
height: calc(100vh - 100rpx);
box-sizing: border-box;
}
.calendar-body .day-list .day-item {
background: #fff;
border-radius: 16rpx;
margin-bottom: 24rpx;
}
.calendar-body .day-list .day-title {
font-size: 30rpx;
font-weight: 500;
color: #000;
text-align: center;
padding: 30rpx 0;
}
.calendar-body .day-list .week-list {
display: flex;
border-bottom: 1rpx solid #f0f0f0;
padding: 24rpx;
}
.calendar-body .day-list .week-list .week-day__text {
flex: 1;
text-align: center;
font-size: 24rpx;
color: #000;
width: 14.28%;
}
.calendar-body .day-list .week-list .week-day__text :last-child {
color: #ed7444;
}
.calendar-body .day-list .week-list .week-day__text :first-child {
color: #ed7444;
}
.calendar-body .day-list .content {
display: flex;
flex-wrap: wrap;
padding: 24rpx;
}
.calendar-body .day-list .content .item {
width: 14.28%;
height: 90rpx;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 24rpx;
}
.calendar-body .day-list .content .item .number {
font-size: 24rpx;
color: #000;
}
.calendar-body .day-list .content .item .dec {
font-size: 24rpx;
font-weight: 700;
color: #ed7444;
min-height: 30rpx;
opacity: 0;
}
.calendar-body .day-list .content .hoverData .number {
color: #333;
}
.calendar-body .day-list .content .hoverData .dec {
opacity: 1;
}
.calendar-body .day-list .content .activeData {
background: #96292f;
border-radius: 8rpx;
}
.calendar-body .day-list .content .activeData .number {
color: #fff;
}
.calendar-body .day-list .content .activeData .dec {
color: #fff;
}
.calendar-body .day-list .content .startDate {
background: #96292f;
border-radius: 8rpx;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.calendar-body .day-list .content .startDate .number {
color: #fff;
}
.calendar-body .day-list .content .startDate .dec {
color: #fff;
}
.calendar-body .day-list .content .endDate {
background: #96292f;
border-radius: 8rpx;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.calendar-body .day-list .content .endDate .number {
color: #fff;
}
.calendar-body .day-list .content .endDate .dec {
color: #fff;
}
.calendar-body .day-list .content .startOrend {
background-color: #f4eaeb;
border-radius: 0;
}
.calendar-body .day-range {
height: calc(100vh - 180rpx);
}
@-webkit-keyframes fadelogIn-data-v-7570169f {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes fadelogIn-data-v-7570169f {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
.calendar-body .day-list .content .item .gray-color {
color: #999;
}
reference uni-app plug-in unit
Same with Cheng Yilong - Multi mode calendar plug-in （ Open the box ） - DCloud Plug in market Normal calendar selection 、 Check in and leave the hotel 、 There are three modes of aircraft round-trip , Customizable theme colors .（ Code streamlined and optimized , Plug in package only 5KB）
https://ext.dcloud.net.cn/plugin?id=472 Time range selector for flying pig - DCloud Plug in market Improved Hotel date selection plug-in based on the selection of flying pig https://ext.dcloud.net.cn/plugin?id=6349
uni-app Components in , Can only be packaged after Alipay applet can be used directly. , But in Alipay native applet , It cannot be directly imported for use .
In case of problems in use , Welcome to discuss together ~~~~
In case of problems in use , Welcome to discuss together ~~~~
In case of problems in use , Welcome to discuss together ~~~~
边栏推荐
猜你喜欢
![[note]vs2015 compilation of masm32 using MASM32 Library](/img/f5/b47336af248d1b485208ec3f9ca12b.png)
[note]vs2015 compilation of masm32 using MASM32 Library
Unity shader learning 004 shader debugging platform difference third-party debugging tools
1.4.2 Capital Market Theroy
No more! Another member of the team left..
The most detailed swing transformer mask of window attachment in history -- Shaoshuai
OKR和KPI的区别
史上最详细的Swin-Transformer 掩码机制(mask of window attentation)————shaoshuai
单片机：A/D(模数转换)的主要指标
Goframe day 4
MCU: RS485 communication and Modbus Protocol
随机推荐
Et framework -22 creating serverinfo entities and events
史上最详细的Swin-Transformer 掩码机制(mask of window attentation)————shaoshuai
单片机/嵌入式的实时性疑问解答
Stream流的注意事项
谈谈激光雷达的波长
单片机：D/A 输出
基于PHP的轻量数码商城系统
微信扫描二维码无法下载文件的解决办法
Line height equals height why not center
Understand the pseudo static configuration to solve the 404 problem of refreshing the page of the deployment project
Cache read / write -- write
1-72 convert string to decimal integer
学生管理系统
Jumpserver: user - system privileged user - Asset - authorization
MCU: pcf8591 hardware interface
Binocular vision -- creating an "optimal solution" for outdoor obstacle avoidance
5G China unicom AP:B SMS ASCII 转码要求
Milliards de données pour déterminer si un élément existe
Goframe day 5
单片机外设介绍：温度传感器 DS18B20