微信小程序的开发之日期、星期选择功能

在公共js内(如utils.js)
// 获取d当前时间多少天后的日期和对应星期
function getDates(days) {
  var todate = getCurrentMonthFirst()
  var dateArry = [];
  for (var i = 0; i < days; i++) {
    var dateObj = dateLater(todate, i);
    dateArry.push(dateObj)
  }
  return dateArry;
}

/**
 * 传入时间后几天
  * param:传入时间:dates: "2018-04-02", later:往后多少天
 */
function dateLater(dates, later) {
  let dateObj = {};
  let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
  let date = new Date(dates);
  date.setDate(date.getDate() + later);
  let day = date.getDay();
  dateObj.year = date.getFullYear();
  dateObj.month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth());
  dateObj.day = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  dateObj.week = show_day[day];
  return dateObj;
}

// 获取当前时间
function getCurrentMonthFirst() {
  var date = new Date();
  var todate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth()) + "-" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  return todate;
}

//获得某月的最后一天  
function getLastDay(year, month) {
  var new_year = year;    //取当前的年份          
  var new_month = month++;//取下一个月的第一天,方便计算(最后一天不固定)          
  if (month > 12) {
    new_month -= 12;        //月份减          
    new_year++;            //年份增          
  }
  var new_date = new Date(new_year, new_month, 1);                //取当年当月中的第一天          
  return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期          
} 

module.exports = {
  getDates: getDates,
  dateLater: dateLater,
  getLastDay: getLastDay
}
页面js中引入
var week = require('../../utils/util.js');
剩余js
/**
   * 页面的初始数据
   */
  data: {
    date_: '',                      // 传给后台时间
    date: ''                        // 时间
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      date_: week.getDates(1)[0].year + '-' + week.getDates(1)[0].month + '-' + week.getDates(1)[0].day,
      date: week.getDates(1)[0].year + '-' + week.getDates(1)[0].month + '-' + week.getDates(1)[0].day + ' (' + week.getDates(1)[0].week + ')'
    })
  },

  /**
   * 时间选择器
   */
  bindDateChange: function (e) {
    var dateArry = [];
    for (var i = 0; i < 1; i++) {
      var dateObj = week.dateLater(e.detail.value, i);
      dateArry.push(dateObj)
    }
    this.setData({
      date_: e.detail.value,
      date: dateArry[0].year + '-' + dateArry[0].month + '-' + dateArry[0].day + ' (' + dateArry[0].week + ')'
    });
    return dateArry;
  },

  /**
   * 选择上一天
   */
  leftTime: function (e) {
    var that = this;
    var ldate = that.data.date_;
    var arr = [];
    arr.push(ldate.split("-"));

    var sec = parseInt(arr[0][2]) - 1;
    var month = parseInt(arr[0][1]);
    var year = parseInt(arr[0][0]);
    if (sec < 10) {
      if (sec == 0) {
        month--;
        sec = week.getLastDay(year, month);
      } else {
        sec = "0" + sec
      }
    }
    if (month < 10) {
      if (month == 0) {
        year--;
        month = 12;
        sec = 31;
      } else {
        month = '0' + month;
      }
    }
    var newTime = year + '-' + month + '-' + sec;

    var dateArry = [];
    for (var i = 0; i < 1; i++) {
      var dateObj = week.dateLater(newTime, i);
      dateArry.push(dateObj)
    }

    wx.request({
      url: '',
      data: {
        userId: '',
        date: dateArry[0].year + '-' + dateArry[0].month + '-' + sec
      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'POST',
      dataType: 'json',
      success: function (res) {
        // 内容获取

        that.setData({
          date: dateArry[0].year + '-' + month + '-' + sec,
          date: dateArry[0].year + '-' + month + '-' + sec + ' (' + dateArry[0].week + ')'
        });
      },
      fail: function (res) { },
      complete: function (res) { },
    })

  },

  /**
   * 选择下一天
   */
  rightTime: function (e) {
    var that = this;
    var ldate = that.data.date_;
    var arr = [];
    arr.push(ldate.split("-"));

    var sec = parseInt(arr[0][2]) + 1;
    var month = parseInt(arr[0][1]);
    var year = parseInt(arr[0][0]);
    if (sec < 10) {
      sec = "0" + sec
    } else if (sec == parseInt(week.getLastDay(year, month)) + 1) {
      month++;
      sec = '01';
    }
    if (month < 10) {
      month = '0' + month;
    } else if (month == 12) {
      year++;
      month = '01';
      sec = '01';
    }

    var newTime = year + '-' + month + '-' + sec;

    var dateArry = [];
    for (var i = 0; i < 1; i++) {
      var dateObj = week.dateLater(newTime, i);
      dateArry.push(dateObj)
    }

    wx.request({
      url: '',
      data: {
        userId: '',
        date: dateArry[0].year + '-' + dateArry[0].month + '-' + sec
      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'POST',
      dataType: 'json',
      success: function (res) {
        // 内容获取

        that.setData({
          date_: dateArry[0].year + '-' + dateArry[0].month + '-' + sec,
          date: dateArry[0].year + '-' + month + '-' + sec + ' (' + dateArry[0].week + ')'
        });
        wx.navigateBack({
          delta: 1,
        })
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  }
补充下wxml
<view class="section clearfix">
  <view  class='left fl' bindtap='leftTime'><image src='../../images/left.png'></image></view>
  <picker mode="date" value="{{date}}" start="1790-01-01" end="{{2022-01-01}}" bindchange="bindDateChange" class='fl'>
    <view class="picker">
      {{date}}
    </view>
  </picker>
  <view  class='right fr' bindtap='rightTime'><image src='../../images/right.png'></image></view>
</view>
#很完整哦~

猜你喜欢

转载自blog.csdn.net/m0_37852904/article/details/80701664