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


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 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
理解javascript回调函数
Dec 28 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
JavaScript如何实现防止重复的网络请求的示例
Jan 28 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
php常见的魔术方法详解
2014/12/25 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
Python画图学习入门教程
2016/07/01 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python3 flask实现文件上传功能
2020/03/20 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
wxpython布局的实现方法
2019/11/01 Python
python set集合使用方法解析
2019/11/05 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
小学综合实践活动总结
2014/07/07 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
Go timer如何调度
2021/06/09 Golang
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
Python Numpy库的超详细教程
2022/04/06 Python