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


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 相关文章推荐
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
jQuery DOM操作实例
Mar 05 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 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判断linux下程序问题实例
2015/07/09 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
经典c++面试题三
2015/07/08 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
家长对老师的评语
2014/04/18 职场文书
代领毕业证委托书
2014/08/02 职场文书
绵山导游词
2015/02/05 职场文书
审美与表现自我评价
2015/03/09 职场文书
小马王观后感
2015/06/11 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL