微信小程式的開發之日期、星期選擇功能
阿新 • • 發佈:2019-01-05
在公共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>