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


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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
如何用js控制css中的float的代码
Aug 16 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php检测文本的编码
2015/07/26 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
vue观察模式浅析
2018/09/25 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
Python的装饰器用法学习笔记
2016/06/24 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python验证码识别的示例代码
2017/09/21 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
高考考python编程是真的吗
2020/07/20 Python
心理健康教育心得体会
2013/12/29 职场文书
策划创业计划书
2014/02/06 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
教师考核表个人总结
2015/02/12 职场文书
支行行长岗位职责
2015/02/15 职场文书
吴仁宝观后感
2015/06/09 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python