您的位置：首页 > 移动开发 > 微信开发

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

2019-10-17 18:07 1106 查看

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

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;
}

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
}

效果如下

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信小程序一周时间表

相关文章推荐

新的分享

章节导航