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


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的闭包
Dec 31 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
javascript实现在线客服效果
Jul 15 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 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生成静态页
2006/11/25 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python实现决策树分类算法
2017/12/21 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
人力资源管理毕业生自荐信
2013/11/21 职场文书
草船借箭教学反思
2014/02/03 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python
Pandas数据结构之Series的使用
2022/03/31 Python
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS