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


Posted in Javascript onOctober 17, 2019

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

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
}

效果如下

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 #Javascript
JS工厂模式开发实践案例分析
Oct 17 #Javascript
小程序input数据双向绑定实现方法
Oct 17 #Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 #Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 #Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 #Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 #Javascript
You might like
php读取xml实例代码
2010/01/28 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
分享php邮件管理器源码
2016/01/06 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
wxPython之解决闪烁的问题
2018/01/15 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python迭代dict的key和value的方法
2018/07/06 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python爬虫中多线程的使用详解
2019/09/23 Python
Django中的session用法详解
2020/03/09 Python
python如何实现递归转非递归
2021/02/25 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
大学生毕业求职信
2014/06/12 职场文书
领导干部考核评语
2015/01/04 职场文书
留学推荐信中文范文
2015/03/26 职场文书
总经理岗位职责范本
2015/04/01 职场文书