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


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 相关文章推荐
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
简谈创建React Component的几种方式
Jun 15 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP可变函数学习小结
2015/11/29 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
详解php协程知识点
2018/09/21 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
Python实现去除代码前行号的方法
2015/03/10 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Python生成器generator原理及用法解析
2020/07/20 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
会计系个人求职信范文分享
2013/12/20 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
安全生产标语口号
2015/12/26 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android