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


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 checkbox全选/取消全选实现代码
Nov 14 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
JavaScript闭包详解
2015/02/02 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
授权委托书公证
2014/09/14 职场文书
世界气象日活动总结
2015/02/27 职场文书
如何写新闻稿
2015/07/18 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers