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


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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
filemanage功能中用到的lib.js
Apr 08 Javascript
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
请求时token过期自动刷新token操作
Sep 11 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
新浪新闻小偷
2006/10/09 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
js实现图片轮换效果代码
2013/04/16 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Python 文件操作实现代码
2009/10/07 Python
基于Python闭包及其作用域详解
2017/08/28 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
django API 中接口的互相调用实例
2020/04/01 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
个人自荐书
2013/12/20 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
物业保安岗位职责
2014/07/02 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
感谢师恩主题班会
2015/08/17 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js