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


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 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
JS实现可视化文件上传
Sep 08 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
PHP安全配置
2006/12/06 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
浅析js封装和作用域
2013/07/09 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
python实现下载文件的三种方法
2017/02/09 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
Python中Yield的基本用法
2020/10/18 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
公务员个人考察材料
2014/12/23 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
python如何获取网络数据
2021/04/11 Python