微信小程序当前时间时段选择器插件使用方法详解


Posted in Javascript onDecember 28, 2018

本文实例为大家分享了微信小程序当前时间时段选择器的实现代码,供大家参考,具体内容如下

DEMO效果图

微信小程序当前时间时段选择器插件使用方法详解

插件思路

准备工作

  1. 获取当前时间,同时获取当前的年、月、日、周几;
  2. 创建处理日期数字的函数;
  3. 创建格式化日期的函数;
  4. 创建获取某月天数的函数;
  5. 创建获取季度开始的月份函数。

获取时段

  1. 创建获取当天的时段函数;
  2. 创建获取本周的时段函数;
  3. 创建获取本月的时段函数;
  4. 创建获取本季度的时段函数;
  5. 创建获取本年的时段函数;
  6. 创建自定义时段函数。

准备阶段的JS

constructor() {
 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;
}
//格式化数字
formatNumber(n) {
 n = n.toString()
 return n[1] ? n : '0' + n
}
//格式化日期
formatDate(date) {
 let myyear = date.getFullYear();
 let mymonth = date.getMonth() + 1;
 let myweekday = date.getDate();
 return [myyear, mymonth, myweekday].map(this.formatNumber).join('-');
}
//获取某月的天数
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;
}
//获取本季度的开始月份
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;
}

时段函数JS

//获取今天的日期
 getNowDate() {
 return this.formatDate(new Date(this.nowYear, this.nowMonth, this.nowDay));
 }
 //获取本周的开始日期
 getWeekStartDate() {
 return this.formatDate(new Date(this.nowYear, this.nowMonth, this.nowDay - this.nowDayOfWeek + 1));
 }
 //获取本周的结束日期
 getWeekEndDate() {
 return this.formatDate(new Date(this.nowYear, this.nowMonth, this.nowDay + (6 - this.nowDayOfWeek + 1)));
 }
 //获取本月的开始日期
 getMonthStartDate() {
 return this.formatDate(new Date(this.nowYear, this.nowMonth, 1));
 }
 //获取本月的结束日期
 getMonthEndDate() {
 return this.formatDate(new Date(this.nowYear, this.nowMonth, this.getMonthDays(this.nowMonth)));
 }
 //获取本季度的开始日期
 getQuarterStartDate() {
 return this.formatDate(new Date(this.nowYear, this.getQuarterStartMonth(), 1));
 }
 //获取本季度的结束日期 
 getQuarterEndDate() {
 return this.formatDate(new Date(this.nowYear, this.getQuarterStartMonth() + 2, this.getMonthDays(this.getQuarterStartMonth() + 2)));
 }
 //获取本年的开始日期
 getYearStartDate() {
 return this.formatDate(new Date(this.nowYear, 0, 1));
 }
 //获取本年的结束日期
 getYearEndDate() {
 return this.formatDate(new Date(this.nowYear, 11, 31));
 }

使用方法

1.引入getperiod.js

const GetPeriod = require("../../utils/getperiod.js");

2.使用getperiod.js

this.time = new GetPeriod();

//获取本年的结束日期
let end = this.time.getYearEndDate();

项目地址

微信小程序—-时段选取插件

git clone git@github.com:Rattenking/GetPeriod.git

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

Javascript 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
javascript json2 使用方法
Mar 16 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
Angular6新特性之Angular Material
Dec 28 #Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 #Javascript
小程序实现抽奖动画
Apr 16 #Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 #Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 #Javascript
小程序文字跑马灯效果
Dec 28 #Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 #Javascript
You might like
用PHP 4.2书写安全的脚本
2006/10/09 PHP
文章推荐系统(三)
2006/10/09 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
htm调用JS代码
2007/03/15 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
JavaScript中string对象
2015/06/12 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python for循环中的陷阱详解
2018/07/13 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
python利用opencv保存、播放视频
2020/11/02 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
数控技术应届生求职信
2013/11/13 职场文书
自主招生推荐信范文
2014/05/10 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android