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


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监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
Javascript变量作用域详解
Dec 06 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
Vue动态组件实例解析
Aug 20 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
vue ref如何获取子组件属性值
Mar 31 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/10/09 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
ext 代码生成器
2009/08/07 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
Python递归实现汉诺塔算法示例
2018/03/19 Python
python调用摄像头显示图像的实例
2018/08/03 Python
python实现接口并发测试脚本
2019/06/25 Python
pycharm实现猜数游戏
2020/12/07 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
物流专业毕业生推荐信范文
2013/11/18 职场文书
运动会广播稿30字
2014/01/21 职场文书
绩效考核实施方案
2014/03/18 职场文书
保密协议书范本
2014/04/22 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
检讨书范文500字
2015/01/28 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android