微信小程序未来七天日期处理（日期+星期）

最新推荐文章于 2024-01-25 14:38:41 发布

程序员林

最新推荐文章于 2024-01-25 14:38:41 发布

阅读量1.5k

点赞数 1

分类专栏：小程序文章标签：公众号小程序 javascript

本文链接：https://blog.csdn.net/weixin_40762926/article/details/121469758

版权

小程序专栏收录该内容

41 篇文章 1 订阅

订阅专栏

这篇博客介绍了一个JavaScript函数，用于处理并格式化未来七天的日期。通过获取当前日期并增加天数，转换为指定格式，包括年、月、日和星期。在WXML和WXSS中展示了如何利用这些数据在滚动视图中创建日期列表，其中包含了日期和星期的显示，并应用了不同的样式来突出当前日期。

摘要由CSDN通过智能技术生成

效果图:

在这里插入图片描述

js:

 // 处理未来七天的函数
    dealTime: function (num) {     // num：未来天数
      var time = new Date()     // 获取当前时间日期
      var date = new Date(time.setDate(time.getDate() + num)).getDate()  //这里先获取日期，在按需求设置日期，最后获取需要的
      var year = time.getFullYear()  //获取年份
      var month = time.getMonth() + 1   // 获取月份
      var day = time.getDay()   //  获取星期
      switch (day) {             //  格式化
        case 0: day = "日"
          break
        case 1: day = "一"
          break
        case 2: day = "二"
          break
        case 3: day = "三"
          break
        case 4: day = "四"
          break
        case 5: day = "五"
          break
        case 6: day = "六"
          break
      }
      var obj = {
        // date: date,
        day: month + '.' + date,
        // month: month,
        week:day,
        date:year+'-'+month + '-' + date
      }
      return obj      // 返回对象
    },
      /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var arr = []
    for (let i = 0; i < 7; i++) {
      arr.push(this.dealTime(i))
    }
    // arr[0].day = '今天'
    this.setData({
      weekInfo: arr            // 赋值给data
    },()=>{
      console.log(this.data.aWeek)
    })


    //api_data(this);  请求接口
  },

wxml


<scroll-view scroll-x class=" nav bg-white" scroll-with-animation scroll-left="{{scrollLeft}}" style="padding-left:8rpx">
  <view class="cu-item date-item {{index==DateTabCur?' Datecur':''}}" wx:for="{{weekInfo}}" wx:key="*this" bindtap="DatetabSelect" data-id="{{index}}" style="padding: 0px 8rpx;">
    <view> {{item.day}}</view>
    <view class="weeks">{{item.week}}</view>
  </view>
</scroll-view>

wxss

.nav .date-item {
  height: 166rpx;
  text-align: center;
  color: #9a9a9a;
  border: none;
  line-height: 78rpx;
}

.date-item .weeks {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background: #333333;
  text-align: center;
  line-height: 70rpx;
  color: white;
  /* margin-bottom: 5rpx; */
}

.nav .date-item.Datecur .weeks {
  border: 4rpx solid red;
  color: #333333;
  background:white;
}