Applet date selection component (for hotel check-in date)
Note: 13:08:00, February 3, 2020
Today, the weather is overcast. Affected by the new coronavirus, the company postponed work and was bored at home. Write down the first blog, sort out the components written before, which will be used in the future. It is also convenient for you to learn from. If you don't write correctly, please point out. Thank you!
Component code part
// components/date-modal/date-modal.js const common = require("../../utils/util.js") Component({ /** * Property list of component */ properties: { isshowDatemodal:{ type: [Boolean], value: false } }, /** * Initial data of components */ data: { timearr:[], DateData:{}, selectIndex:0, selectTime:"00:00", dateCycle: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] }, lifetimes:{ attached: function() { // Execute when the component instance enters the page node tree let timearr = [] for(let i = 0; i< 24; i++) { if (i < 10) { i = "0" + i } timearr.push(i + ":00") timearr.push(i + ":30") } this.setData({ timearr: timearr, DateData: common.GetDateMonthDay(new Date()) }) //console.log(common.GetDateMonthDay(new Date())) }, }, pageLifetimes: { // Lifecycle function of the page where the component is located show() { } }, /** * Method list for component */ methods: { touchmove(e) { return false }, //Closing date closeDateBtn(){ this.setData({ isshowDatemodal:false }) }, //Time choice selectTimeBtn(e){ let time=this.data.timearr[e.detail.value[0]] //console.log(time) this.setData({ selectTime:time }) }, //Date selection selectDateBtn(e) { let index = e.currentTarget.dataset.index let month=e.currentTarget.dataset.month let year=e.currentTarget.dataset.year if (index >= this.data.DateData.today||this.data.DateData.ymarr[0].month!=month) { this.data.DateData.selectday = index this.data.DateData.selectmonth = month this.data.DateData.selectyear = year this.setData({ DateData: this.data.DateData }) } }, //Instant check-in nowDateBtn(e){ this.closeDateBtn(); }, //Confirmation date ortherDateBtn(e) { let date=this.data.DateData let selectTime=this.data.selectTime //console.log(date.selectyear + "year" + date.selectmonth + "month" + date.selectday + "day" + selectTime) wx.showToast({ icon:'none', title: date.selectyear + "year" + date.selectmonth + "month" + date.selectday + "day " + selectTime, }) this.triggerEvent('showTab', res.data) } } })
wxml
<!--components/date-modal/date-modal.wxml--> <view class="mask-date" hidden="{{!isshowDatemodal}}" catchtouchmove="touchmove"> <view class="modal-date"> <view class="title">Date and time of residence<view catchtap="closeDateBtn" class="closedate">X</view> </view> <view class="masktime"> <view class="timetitle">time</view> <picker-view bindchange="selectTimeBtn" class="selectime" value="{{item}}" > <picker-view-column > <view style="line-height:34px;" wx:for="{{timearr}}" wx:key="index" >{{item}}</view> </picker-view-column> </picker-view > </view> <view class="date"> <view class="datecycle"> <view class="lic" wx:for="{{dateCycle}}" wx:key="index">{{item}}</view> </view> <scroll-view scroll-y="true" style="height:60vw;padding-bottom:14vw;"> <block wx:for="{{DateData.ymarr}}" wx:key="index" wx:for-item="ymarr" wx:for-index="index1" > <view class="li-yearmon">{{ymarr.ym}}</view> <view class="dateday"> <view wx:if="{{index1==1||DateData.today<=(7-ymarr.firstDay)}}" wx:for="{{DateData.ymarr[index1].firstDay}}" wx:key="index" class="lid">{{ymarr[index1].firstDay}}</view> <view wx:for="{{ymarr.dateArr}}" wx:key="index" catchtap="selectDateBtn" data-index="{{item}}" data-year="{{ymarr.year}}" data-month="{{ymarr.month}}" wx:key="index" class="lid {{item<DateData.today&&index1==0?'lided':''}} {{item==DateData.selectday&&ymarr.month==DateData.selectmonth?'lid_s':''}}">{{item}}</view> </view> </block> </scroll-view> </view> <view class="ulbtn"> <view class="lil" catchtap="nowDateBtn" >Instant check-in</view> <view class="lir" catchtap="ortherDateBtn" >Confirmation date</view> </view> </view></view>
css
/* components/date-modal/date-modal.wxss */ .mask-date{position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(128, 127, 127, 0.9);z-index: 9;} .mask-date .modal-date{position: fixed;background: #fff;top: 10vh;left: 5vw;right: 5vw;z-index:10;border-radius: 1vw;padding-bottom: 3vw;} .mask-date .modal-date .title{font-size: 4vw;background: #fbbe0e;color: #fff;text-align: center;line-height: 12vw;position: relative ;border-top-left-radius: 1vw;border-top-right-radius: 1vw; } .mask-date .modal-date .closedate{position: absolute;top: 3vw;right: 3vw;color: #7a7a7a;background: #fff;border-radius: 100%;width: 6vw;height: 6vw;text-align: center;line-height: 6vw;font-size: 3.6vw;} .mask-date .modal-date .masktime{display: table;width: 100%;} .mask-date .modal-date .timetitle{color: #686868;font-size: 3.6vw;line-height: 10vw;padding-left: 3vw;float: left;} .mask-date .modal-date .selectime{line-height:10vw;height:30vw;text-align: center;color: #fbbe0e;width:30vw;float: right;margin-right: 3vw;} .mask-date .modal-date .date{padding: 0 3vw;color: #686868;} .mask-date .modal-date .date .datecycle{margin: 0 auto; font-size: 3.6vw;text-align: center;height: 5vw;margin-bottom: 2vw;} .mask-date .modal-date .date .datecycle .lic{float: left;width: 12vw;line-height: 5vw;} .mask-date .modal-date .date .li-yearmon{display: table;width: 82vw; height: 10vw;line-height: 10vw; font-size: 3.6vw;margin-left: 2vw;padding-top: 1vw;color:#000000;} .mask-date .modal-date .date .dateday{ margin: 0 auto; font-size: 3.6vw;text-align: center;} .mask-date .modal-date .date .dateday .lid{float: left;width: 8vw;margin: 1vw 2vw 0 2vw;border-radius: 100%;height: 8vw;line-height: 8vw;} .mask-date .modal-date .date .dateday .lided{color: #fff;} .mask-date .modal-date .date .dateday .lid_s{background: #fbbe0e;color: #fff;} .mask-date .modal-date .ulbtn{background: #fff; display: flex;text-align: center;font-size: 4.2vw;position: absolute;bottom: 0;left: 0;width: 100%;height: 14vw;padding: 0 6vw;box-sizing: border-box;} .mask-date .modal-date .ulbtn::after{content: "";position: absolute; background:#d9d9d9; top:-0.7vw; left: 5vw;height:1vw;right: 5vw; z-index: 1;transform: scaleY(0.3);transform-origin:0 0;} .mask-date .modal-date .ulbtn .lil{flex: 1;border-right: 0.3vw #d9d9d9 solid;color: #00d4fa;height: 8vw;margin: 3vw 0;line-height: 8vw;} .mask-date .modal-date .ulbtn .lir{flex: 1;color: #fbbe0f;height: 8vw;margin: 3vw 0;line-height: 8vw;}
Above is all the code of the component, below is the use, very simple, look at the code
json
{ "usingComponents": { "date-modal": "/components/date-modal/date-modal" } }
html, here is a knowledge point component and the page between the value using triggerEvent do not understand little partners can baidu oh.
<date-modal bind:dateModalData="dateModalData" isshowDatemodal="{{isshowDate}}" />
js
//index.js //Get application instance const app = getApp() Page({ data: { isshowDate:true, }, //Click confirm date to upload data from component dateModalData:function(e){ wx.showToast({ icon: 'none', title: e.detail.datetime + e.detail.times, }) }, onLoad: function () { }, })
By the way, I almost forgot that the most important part is the js with a date. I wrote it into the public js. Here I only made the time and date of two months. If you need more than one month, you can write it yourself,
function GetDateMonthDay(mydate) { //Get the date of the month var year = mydate.getFullYear(); var month = mydate.getMonth(); var months = month + 1; let _year = year; let _month = months; let today = mydate.getDate(); var fist = new Date(year, month, 1); let firstDay = fist.getDay(); var last = new Date(year, months, 0); let lastDay = last.getDate(); let dateArr = [] for (var i = 1; i < lastDay + 1; i++) { dateArr.push(i); } let dd = 7 - firstDay if (today > dd) { let num = Math.floor((today - dd) / 7) if ((today - dd) % 7 == 0) { num = num - 1 } dateArr = dateArr.slice((num * 7) + dd) } let ym = _year + "year" + _month + "month" let themonth = { ym, dateArr, firstDay, "month": _month, "year": _year } let nextMonth = GetnextMonth(mydate) console.log(nextMonth) let thedatedata = { ymarr: [themonth, nextMonth], today, "selectday": today, "selectmonth": _month, "selectyear": _year, "selectdate": ym + today + "day" } // console.log(thedatedata) return thedatedata } function GetnextMonth(mydate) { //Get next month date var _year = mydate.getFullYear(); var _month = mydate.getMonth(); _month = _month + 1 var months = ""; var years = ""; if (_month == 12) { _month = 0; months = _month; years = _year + 1; } else { months = _month + 1; years = _year; } var months = _month + 1; var first = new Date(years, months - 1, 1); let firstDay = first.getDay(); var last = new Date(years, months, 0); let lastDay = last.getDate(); let dateArr = []; for (var i = 1; i < lastDay + 1; i++) { dateArr.push(i); } let month_day = { "ym": years + "year" + months + "month", dateArr, firstDay, "month": months, "year": years } return month_day; } module.exports = { GetDateMonthDay: GetDateMonthDay, GetnextMonth: GetnextMonth }
####Final rendering
Sum up
Tutorial: first import the components, then use the components on the required page, set the parameters and, just remember to add two utils functions, and then it will be finished!
Conclusion: the code needs to be optimized, and the comments are not detailed enough. I hope I can do better in the next article. If there is something wrong, I forget the guidance of everyone. The first article I wrote! Thank you!
