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


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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
详解Node.js使用token进行认证的简单示例
May 25 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面向对象概念
2011/11/06 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
JS与框架页的操作代码
2010/01/17 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python 类的继承实例详解
2017/03/25 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python之yield和Generator深入解析
2019/09/18 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
企业内控岗位的职责
2014/02/07 职场文书
留学顾问岗位职责
2014/04/14 职场文书
旷课检讨书500字
2014/10/14 职场文书
2015入党自荐书范文
2015/03/05 职场文书
责任书格式
2019/04/18 职场文书