当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    微信小程序一周时间表功能实现

    栏目:代码类 时间:2019-10-17 12:05

    这篇文章主要介绍了微信小程序一周时间表功能实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    wxml

       <view class="dateView">
        <image class="dateLeft" bindtap="prevWeek" src="../../res/imgs/dateLeft.png"></image>
        <view>{{dateStart}} 至 {{dateEnd}}</view>
        <image class="dateRight" bindtap="nextWeek" src="../../res/imgs/dateRight.png"></image>
       </view>

    wxss

    .dateView{
     padding:0 32rpx;
     height:98rpx;
     display: flex;
     align-items: center;
     background:#fff;
    }
    .dateView>image{
     width:50rpx;
     height:50rpx;
    }
    .dateView>view{
     flex: 1;
     text-align: center;
     color:#333;
     font-size: 34rpx;
    }

    js

    const GetPeriod = require("../../utils/getperiod.js");
    Page({
    
     /**
      * 页面的初始数据
      */
     data: {
      currentTab: 1,
      dateStart:'2019-10-16',
      dateEnd: '2019-10-16',
     },
    
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function(options) {
      let that = this;
     
      that.getWeekStartDate(0)
     },
    
     //获取本周的开始日期
     getWeekStartDate(numDay) {
      let that = this;
      this.now = new Date();
      this.nowYear = this.now.getYear(); //当前年 
      this.nowMonth = this.now.getMonth(); //当前月 
      this.nowDay = this.now.getDate(); //当前日 
      this.nowDayOfWeek = this.now.getDay(); //今天是本周的第几天 
      this.nowYear += (this.nowYear < 2000) ? 1900 : 0;
      let dateStart = GetPeriod.formatDate(new Date(this.nowYear, this.nowMonth, this.nowDay - this.nowDayOfWeek + 1 + numDay));
      let dateEnd = GetPeriod.formatDate(new Date(this.nowYear, this.nowMonth, this.nowDay - this.nowDayOfWeek + 7 + numDay));
      // console.log(dateStart)
      // 获取今天日期
      let now = GetPeriod.formatDate(new Date(this.nowYear, this.nowMonth, this.nowDay));
      now = now.replace(/-/g, "/");
      now = now.substring(5);
      this.setData({
       dateStart: dateStart,
       dateEnd: dateEnd,
       now: now,
       dates: now,
      })
      // 初始化数据(历史纪录)
      var timestamp = Date.parse(new Date(this.data.dateStart));
      timestamp = timestamp / 1000;
      // console.log(timestamp);
      that.setData({
       timestamp: timestamp
      })  
     },
    
    // 点击上一周
    prevWeek: function(e) {
    this.data.num = this.data.num - 7;
    this.getWeekStartDate(this.data.num);
    },
    // 点击下一周
    nextWeek: function(e) {
    this.data.num = this.data.num + 7;
    this.getWeekStartDate(this.data.num);
     },
    })
    function constructor1 (){
     this.now = new Date();
     this.nowYear = this.now.getYear(); //当前年 
     this.nowMonth = this.now.getMonth(); //当前月 
     this.nowDay = this.now.getDate(); //当前日 
     this.nowDayOfWeek = this.now.getDay(); //今天是本周的第几天 
     this.nowYear += (this.nowYear < 2000) ? 1900 : 0;
    }
    //格式化数字
    function formatNumber (n) {
     n = n.toString()
     return n[1] ? n : '0' + n
    }
    //格式化日期
    function formatDate(date){
     let myyear = date.getFullYear();
     let mymonth = date.getMonth() + 1;
     let myweekday = date.getDate();
     return [myyear, mymonth, myweekday].map(this.formatNumber).join('-');
    }
    //获取某月的天数
    function getMonthDays (myMonth) {
     let monthStartDate = new Date(this.nowYear, myMonth, 1);
     let monthEndDate = new Date(this.nowYear, myMonth + 1, 1);
     let days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
     return days;
    }
    //获取本季度的开始月份
    function getQuarterStartMonth (){
     let startMonth = 0;
     if (this.nowMonth < 3) {
      startMonth = 0;
     }
     if (2 < this.nowMonth && this.nowMonth < 6) {
      startMonth = 3;
     }
     if (5 < this.nowMonth && this.nowMonth < 9) {
      startMonth = 6;
     }
     if (this.nowMonth > 8) {
      startMonth = 9;
     }
     return startMonth;
    }
    //获取本周的开始日期
    function getWeekStartDate() {
     return this.formatDate(new Date(this.nowYear, this.nowMonth, this.nowDay - this.nowDayOfWeek + 1));
    }
    //获取本周的结束日期
    function getWeekEndDate() {
     return this.formatDate(new Date(this.nowYear, this.nowMonth, this.nowDay + (6 - this.nowDayOfWeek + 1)));
    }
    //获取今天的日期
    function getNowDate() {
     return this.formatDate(new Date(this.nowYear, this.nowMonth, this.nowDay));
    }
    function formatTime(date) {
     var year = date.getFullYear()
     var month = date.getMonth() + 1
     var day = date.getDate()
     var hour = date.getHours()
     var minute = date.getMinutes()
     var second = date.getSeconds()
     return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
    module.exports = {
     formatNumber: formatNumber,
     constructor1: constructor1,
     formatDate: formatDate,
     getMonthDays: getMonthDays,
     getQuarterStartMonth: getQuarterStartMonth,
     getWeekStartDate: getWeekStartDate,
     getNowDate: getNowDate,
     getWeekEndDate: getWeekEndDate,
     formatTime: formatTime
    }