小程序日期选择组件

小程序日期选择组件(适用于酒店入住日期)

小记：2020年2月3日13:08:00
今天天气阴，受新冠状病毒的影响，公司推迟上班，闲着在家无聊，写下第一篇博客，整理之前写过的组件，方便以后还会用到，也方便各位小伙伴们借鉴，如果哪里写不对了望各位大佬指出，谢谢！

组件代码部分

// components/date-modal/date-modal.js
const common = require("../../utils/util.js")
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isshowDatemodal:{
      type: [Boolean],
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    timearr:[],
    DateData:{},
    selectIndex:0,
    selectTime:"00:00",
    dateCycle: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  },
  lifetimes:{
    attached: function() {
      // 在组件实例进入页面节点树时执行
      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: {
    // 组件所在页面的生命周期函数
  show() {
     
    }



    },

  /**
   * 组件的方法列表
   */
  methods: {
    touchmove(e) {
      return false 
    },
    //关闭日期
    closeDateBtn(){
      this.setData({
        isshowDatemodal:false
      })
    },
    //时间选择
    selectTimeBtn(e){
      let time=this.data.timearr[e.detail.value[0]]
      //console.log(time)
      this.setData({
        selectTime:time
      })

    },
    //日期选择
    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
          })
         
        }
    },
    //即时入住 
    nowDateBtn(e){
      this.closeDateBtn();
    },
    //确认日期
    ortherDateBtn(e) {
     
      let date=this.data.DateData
      let selectTime=this.data.selectTime
      //console.log(date.selectyear+"年"+date.selectmonth+"月"+date.selectday+"日 "+selectTime)
     wx.showToast({
       icon:'none',
       title: date.selectyear + "年" + date.selectmonth + "月" + date.selectday + "日 " + 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">入驻日期及时间<view catchtap="closeDateBtn" class="closedate">X</view> </view>
<view class="masktime">
<view class="timetitle">时间</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" >即时入住</view>
  <view class="lir" catchtap="ortherDateBtn" >确认日期</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;}

上面是组件的所有代码，下面是使用，很简单，看代码

json

{
  "usingComponents": {
    "date-modal": "/components/date-modal/date-modal"
  }
}

html，这里有个知识点组件与页面之间的传值使用triggerEvent 不懂的小伙伴可以百度一下哦。

  <date-modal bind:dateModalData="dateModalData" isshowDatemodal="{{isshowDate}}" />

js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    isshowDate:true,
  },
  //点击确认日期从组件上传来数据
  dateModalData:function(e){
    wx.showToast({
      icon: 'none',
      title: e.detail.datetime + e.detail.times,
    })
  },


  onLoad: function () {
   
  },
 
})

对了差点忘了，最关键的一部分，还有个日期的js，我把它写到了公用js里面，这里只做了两个月的时间日期，如果需要多个月可以自行编写，

function GetDateMonthDay(mydate) { //获取当月日期
  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 + "年" + _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 + "日" }
  // console.log(thedatedata)

  return thedatedata
}



function GetnextMonth(mydate) { //获取下一月日期
  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 + "年" + months + "月", dateArr, firstDay, "month": months, "year": years }
  return month_day;
}

module.exports = {
  GetDateMonthDay: GetDateMonthDay,
  GetnextMonth: GetnextMonth
}

####最后的效果图

总结一下

使用教程：首先导入组件，然后在需要的页面使用组件，设置好参数和就可以了，记得要加入utils两个函数，然后就大功告成！

总结：代码有待优化，注释也不够详细，希望下篇自己下好一点，有不对之处忘各位大佬指导指导，小弟第一次写的文章！谢谢！

来源：CSDN

作者：nice_and_nice

链接：https://blog.csdn.net/nice_and_nice/article/details/104156133