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


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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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 注册时输入信息验证器的实现详解
2013/07/05 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
文本加密解密
2006/06/23 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
学习python (1)
2006/10/31 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python实现根据文件格式分类
2019/10/31 Python
python科学计算之narray对象用法
2019/11/25 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
大学生求职推荐信
2013/11/27 职场文书
业务部经理岗位职责
2014/01/04 职场文书
运动会稿件100字
2014/02/21 职场文书
反邪教警示教育方案
2014/05/13 职场文书
计算机专业自荐信
2014/05/24 职场文书
民事调解书范文
2015/05/20 职场文书
正规借条模板
2015/05/26 职场文书
公司职员入党自传书
2015/06/26 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
导游词之清晏园
2019/11/22 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
Elasticsearch 聚合查询和排序
2022/04/19 Python