小程序日历+时间选择组件

展示

js部分

// component/timepick/timepick.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    'calednar': {
      type: Boolean,
      value: '',
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
        this.setData({
          if_calednar: newVal
        })
      }
    },
  },
  ready: function() {
    
  },
  /**
   * 组件的初始数据
   */
  data: {
    if_calednar: true,
    weeks: ['日', '一', '二', '三', '四', '五', '六'],
    days: [],
    year: 0,
    month: 0,
    day: 1,
    time: '00:00',
    nowday: "",
    leftIcon: "",
    nowtime: "",
    iftoday: "",
  },

  /**
   * 组件的方法列表
   */
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function() {
      this.dateData()
      this.ifnowday()
      this.ifnowtime()
    },
    moved: function() {},
    detached: function() {},
  },
  methods: {
    togglebg(data) {
      bglayer = {
        data: data
      }
      this.triggerEvent('togglebg', bglayer)
    },
    // 日历
    // 选择时间（日历弹窗）
    choseTime(e) {
      var id = e.currentTarget.dataset.id
      this.setData({
        if_calednar: false,
        timeState: id
      })
    },
    // 日历操作
    // 用户改变月份
    changemonth: function(e) {
      var id = e.currentTarget.dataset.id
      var month;
      var year;
      var day;
      month = this.data.month
      year = this.data.year
      day = this.data.day
      var date = new Date();
      var nowyear = date.getFullYear();
      var nowmonth = date.getMonth() + 1;
      var nowday = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var nowtime = hour + ":" + minute

      if (id == "mius") {
        month--
        if (month < 1) {
          month = 12
          year--
        }
      } else if (id == "add") {
        month++
        if (month > 12) {
          month = 1
          year++
        }
      }
      if (nowyear == year && nowmonth == month && nowday == day) {
        this.setData({
          nowtime: nowtime,
          iftoday: true
        })
      } else {
        this.setData({
          iftoday: false
        })
      }
      if (minute < 10) {
        minute = "0" + minute
      }
      if (hour < 10) {
        hour = "0" + hour
      }
      var time = hour + ":" + minute
      this.updateDays(year, month, day, time)
    },
    // 日历读取
    dateData: function() {
      var date = new Date();
      var days = [];
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      if (minute < 10) {
        minute = "0" + minute
      }
      if (hour < 10) {
        hour = "0" + hour
      }
      var time = hour + ":" + minute
      this.updateDays(year, month, day, time)
    },
    updateDays: function(year, month, day, time) {
      var days = [];
      var dateDay, dateWeek;
      // 根据日期获取每个月有多少天
      var getDateDay = function(year, month) {
        return new Date(year, month, 0).getDate();
      }
      //根据日期获取这天是周几
      var getDateWeek = function(year, month) {
        return new Date(year, month - 1, 1).getDay();
      }
      dateDay = getDateDay(year, month)
      dateWeek = getDateWeek(year, month)
      //向数组中添加天
      for (let index = 1; index <= dateDay; index++) {
        days.push(index)
      }
      //向数组中添加，一号之前应该空出的空格
      for (let index = 1; index <= dateWeek; index++) {
        days.unshift(0)
      }
      this.setData({
        days: days,
        year: year,
        month: month,
        day: day,
        time: time,
      })
      this.ifnowday()
    },
    // 选择某个day
    clickdata(e) {
      var nowyear = this.data.year
      var nowmonth = this.data.month
      var nowday = e.currentTarget.dataset.id
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var nowtime = hour + ":" + minute
      if (nowyear == year && nowmonth == month && nowday == day) {
        this.setData({
          nowtime: nowtime,
          iftoday: true
        })
      } else {
        this.setData({
          iftoday: false
        })
      }

      this.setData({
        day: nowday
      })
    },
    // 选择时间
    time_select(e) {
      var time = e.detail.value
      this.setData({
        time: time
      })
    },
    // 判断时间
    ifnowtime(e) {
      var nowyear = this.data.year
      var nowmonth = this.data.month
      var nowday = this.data.day
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var nowtime = hour + ":" + minute
      if (nowyear == year && nowmonth == month && nowday == day) {
        this.setData({
          nowtime: nowtime,
          iftoday: true
        })
      } else {
        this.setData({
          iftoday: false
        })
      }
    },
    // 日历上的确定按钮
    sure_btn(e) {
      var timeStatus = this.data.timeState
      var list = this.data.order_list
      var state = this.data.time_state
      var year = this.data.year
      var month = this.data.month
      var day = this.data.day
      var time = this.data.time
      var date = {}
      if (month < 10) {
        month = "0" + month
      }
      if (day < 10) {
        day = "0" + day
      }
      date.year = year
      date.month = month
      date.day = day
      date.time = time
      var timeData = year + "-" + month + "-" + day + "T" + time + ":" + "00"

      this.setData({
        if_calednar: true,
      })
      var data = {
        "time": timeData,
        "if_calednar": true
      }
      this.triggerEvent("timeData", data)
    },
    // 判断年份大小
    ifnowday(e) {
      var date = new Date()
      var year = this.data.year
      var month = this.data.month
      var nowyear = date.getFullYear()
      var nowmonth = date.getMonth() + 1
      var nowday = date.getDate()
      if (year == nowyear && month <= nowmonth) {
        this.setData({
          month:nowmonth,
          leftIcon: true,
          day: nowday
        })
      } else {
        this.setData({
          leftIcon: false
        })
      }
      this.setData({
        nowday: nowday
      })
    },
    // 失去焦点
    lostTime(e) {
      this.setData({
        if_calednar: true,
      })
      var data = {
        "if_calednar": true
      }
      this.triggerEvent("lostTime", data)
    },
  },
})

wxss部分

.unlight{
  opacity: 0.5;
}

/* 日历部分 */
.date {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
  position: relative;
}
.topYM{
  width: 210rpx;
  margin: 50rpx
}
.direction {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  text-align: center;
  display: flex;
  display: -webkit-flex;
}
.leftIcon{
  width: 14rpx;
  height: 24rpx;
  align-self: center;
  margin: 0 auto;
}
.rightIcon{
  width: 14rpx;
  height: 24rpx;
  align-self: center;
  margin: 0 auto;
}
.header {
  display: flex;
  flex-direction: row;
  margin:  0 68rpx 48rpx 68rpx;
}

.weeks-item-text {
  width: 100%;
  font-size: 24rpx;
  text-align: center;
  font-weight: bold;
  opacity: 0.3;
}

.body-days {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  margin: 0 68rpx;
}

.days-item {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 10rpx;
  margin-left: 22rpx;
}

.days-item-text {
  width: 64rpx;
  font-size: 32rpx;
  color: #333;
  align-self: center;
}
.light{
  background-color: rgba(96, 195, 255, 1);
  color: white;
}
.sure_btn{
  font-size: 30rpx;
  color: rgba(96, 195, 255, 1);
  font-weight: bold;
  position: absolute;
  top: 40rpx;
  right: 40rpx;
  z-index: 9;
}
.calednar{
  position: fixed;
  z-index: 1997;
  bottom: 160rpx;
  background-color: #fff;
  height: 700rpx;
  width: 100%;
  border-radius: 20rpx 20rpx 0 0;
}
.calednarImg{
  width: 34rpx;
  height: 32rpx;
  position: absolute;
  right: 20rpx;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.bg_layer{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1996;
  background-color: rgba(51, 51, 51, 1);
  opacity: 0.3;
}
.time{
  width: 100%;
  height: 160rpx;
  background-color: rgba(245, 245, 245, 1);
  position: fixed;
  bottom: 0;
  z-index: 1999;
  text-align: center;
}
.time_text{
  font-size: 48rpx;
  margin-top: 36rpx;
  letter-spacing: 6rpx;
}

/* 输入框的占位符样式 */
.placeholderClass{
  color: rgba(51, 51, 51, 0.3);
  
}

.inputClass{
  width: 316rpx;
  height: 64rpx;
  border: 2rpx solid #E2E8ED;
  padding: 0 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
}

wxml部分

<!-- 日历时间弹窗 -->
<view bindtouchmove='aaa' hidden='{{if_calednar}}'>
  <view class='bg_layer' bindtouchmove='_aaa' bindtap="lostTime"></view>
  <view class='calednar'>
    <view class='sure_btn' bindtap='sure_btn'>确定</view>
    <view class="date">
    <view class="direction" data-id="mius" bindtap='changemonth' hidden="{{leftIcon}}" style="left:150rpx">
    <image class="leftIcon" src='/images/left.png' />
    </view>
      
      <label class="topYM">{{year}}年{{month}}月</label>
      <view class="direction" data-id="add" bindtap='changemonth' style="right:150rpx">
      <image class="rightIcon" src='/images/right.png'/>
      </view>
      
    </view>
    <view class="header">
      <block wx:for="{{weeks}}" wx:key="index">
        <text class="weeks-item-text">{{item}}</text>
      </block>
    </view>
    <view class="body-days">
      <block wx:for="{{days}}" wx:key="index">
        <view class="days-item {{item==day?'light':''}}">
          <view class="days-item-text {{item==day?'light':''}} {{leftIcon==true?(item<nowday?'unlight':''):''}}" bindtap="{{leftIcon==true?(item>=nowday?'clickdata':''):'clickdata'}}" data-id='{{item}}' wx:if="{{item>0}}">{{item}}</view>
        </view>
      </block>
    </view>
  </view>
  <view class="time">
    <picker mode="time" value="{{time}}" start="{{iftoday==true?nowtime:''}}" end="" bindchange="time_select" bindtap="ifnowtime">
      <view class="time_text">{{time}}</view>
    </picker>
  </view>
</view>

页面使用

<timepick calednar="{{if_calednar}}" bind:timeData="timeData"></timepick>

补充说明

该组件实现比较久远了，可能有部分地方还没有完善，欢迎大家评论区提出来