Sow nothing reap nothing

微信小程序获取从明天开始一周日期(包含周几及号数)简单实现

已有6,232次关注

微信小程序简单实现第二天开始一周日期,显示为周几及当天号数,点击星期可切换日期,下方显示当前选择日期,以便其他函数调用;

效果截图:
微信小程序获取从明天开始一周日期.gif

WXML代码:

<view class="choose-time-middle">
  <view class="date">
    <view wx:for="{{dateArray}}" wx:key="index"><button class="{{item.day == thisDate ? 'active' : ''}}" data-id="{{item.day}}" bindtap="dateClick" data-time="{{item.time}}">{{item.week}}</button></view>
    <text class="clearfix"></text>
  </view>
  <view class="date">
    <view wx:for="{{dateArray}}" wx:key="index">{{item.day}}</view>
    <text class="clearfix"></text>
  </view>
</view>
<view class="show-date">
  <text>当前时间:{{nowDate}}</text>
</view>

WXSS代码:

.choose-time-middle{
  width: 100%;
  height: 120rpx;
  padding: 10rpx 0 20rpx 0;
  background-color: #fff;
}
.date view{
  float: left;
  width: 14%;
  padding-top: 10rpx;
  text-align: center;
}
.date view button{
  padding: 0;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  background-color: #fff;
  border-radius: 50%;
}
.date view button.active{
  background-color: #009ee6;
  color: #fff;
}
.date view button::after{
  border: none;
}
.show-date{
  width: 100%;
  text-align: center;
  padding: 50rpx 0rpx;
}

JS代码:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    thisDate: '', //日期选中
    nowDate: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeekDay();
  },

  /**
   * 号数补零
   */
  paddingZero: function (n) {
    if (n < 10) {
      return '0' + n;
    } else {
      return n;
    }
  },

  /**
   * 获取明日开始一周日期
   */
  getWeekDay: function () {
    let that = this;
    let myDate = new Date();
    let year = myDate.getFullYear();
    let month = myDate.getMonth() + 1;
    let dates = myDate.getDate();
    let week = ['日', '一', '二', '三', '四', '五', '六'];
    myDate.setDate(myDate.getDate() + 1);
    let dateTemp;
    let timeArr = [];
    let times;
    for (let i = 0; i < 7; i++) {
      times = year + '-' + that.paddingZero((myDate.getMonth() + 1)) + "-" + that.paddingZero(myDate.getDate());
      dateTemp = myDate.getDate();
      timeArr.push({ 'week': week[myDate.getDay()], 'day': dateTemp, 'time': times });
      myDate.setDate(myDate.getDate() + 1);
    }
    that.setData({
      dateArray: timeArr,
      thisDate: timeArr[0].day,
      nowDate: times
    });
  },
  
  /*
   * 日期选择 
   */
  dateClick: function (options) {
    let _this = this;
    let dateId = options.currentTarget.dataset.id;
    let times = options.currentTarget.dataset.time;
    _this.setData({
      thisDate: dateId,
      nowDate: times
    });
  }

})

JSON代码:

{
  "navigationBarTitleText": "获取明天开始一周时间",
  "disableSwipeBack": true
}

已自动关闭评论