Applet date selection component

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!

Published 1 original article · praised 0 · visited 4
Private letter follow

Keywords: JSON

Added by RadiationHazard on Mon, 03 Feb 2020 08:45:07 +0200