1. 程式人生 > >微信小程式的開發之日期、星期選擇功能

微信小程式的開發之日期、星期選擇功能

在公共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>
#很完整哦~