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


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封装和作用域
Jul 09 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
vue生命周期的探索
Apr 03 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
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 array_unique之后json_encode需要注意
2011/01/02 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
关于毕业的广播稿
2014/01/10 职场文书
地球一小时宣传标语
2014/06/24 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
交通事故协议书范文
2014/10/23 职场文书
委托培训协议书
2014/11/17 职场文书
召开会议通知范文
2015/04/15 职场文书
论文致谢词范文
2015/05/14 职场文书