微信小程序----当前时间的时段选择器插件（今天、本周、本月、本季度、本年、自定义时段）

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

DEMO效果图

插件思路

准备工作

获取当前时间，同时获取当前的年、月、日、周几；
创建处理日期数字的函数；
创建格式化日期的函数；
创建获取某月天数的函数；
创建获取季度开始的月份函数。

获取时段

创建获取当天的时段函数；
创建获取本周的时段函数；
创建获取本月的时段函数；
创建获取本季度的时段函数；
创建获取本年的时段函数；
创建自定义时段函数。

准备阶段的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));}

使用方法

引入getperiod.js

const GetPeriod = require("../../utils/getperiod.js");

使用getperiod.js

this.time = new GetPeriod();//获取本年的结束日期
let end = this.time.getYearEndDate();

项目地址

微信小程序----时段选取插件

git clone git@github.com:Rattenking/GetPeriod.git

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

DEMO下载

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

微信小程序----当前时间的时段选择器插件（今天、本周、本月、本季度、本年、自定义时段）相关推荐

关于微信小程序中时间预约的简单实现
关于微信小程序中时间预约的简单实现 1. js中定义获取日期函数.日期点击事件 2. 在data中定义数组等变量 3. onLoad调用函数并保存回data 4. wxml展示 5. 页面监控函数on ...
微信小程序实现时间预约功能
微信小程序实现时间预约功能类似这样 1.wxml  <view class='containt'>&l ...
微信小程序56个民族数组选择器
微信小程序56个民族数组选择器 wxml部份: <view class="section"><picker bindchange="bindPicker ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
uniapp微信小程序支付券或商家券插件
小程序发券插件API https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter9_3_1.shtml 注意:支持商户在小程序场景内,向指定用户发放指定 ...
小程序源码：最新掌上题库微信小程序源码下载，修复登录接口，支持在线考试，自定义导入考题-多玩法安装简单
这是一款题库微信小程序源码支持积分商城.自定义试题及导入.知识点分类.模式试题考试.流量主等首页模块:专项刷题 .题型刷题.乱序刷题.我的收藏.我的错题.未作习题.刷知识点.考前必背另外还有更多 ...
最新掌上题库微信小程序源码下载，修复登录接口，支持在线考试，自定义导入考题
这是一款题库微信小程序源码支持积分商城.自定义试题及导入.知识点分类.模式试题考试等首页模块:专项刷题.题型刷题.乱序刷题.我的收藏.我的错题.未作习题.刷知识点.考前必背另外还有更多功能就不一 ...
获取本周本月本季度本年开始时间和结束时间
获取本周本月本季度本年开始时间和结束时间转载连接:https://blog.csdn.net/Augus3344/article/details/51015704
微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...

微信小程序----当前时间的时段选择器插件（今天、本周、本月、本季度、本年、自定义时段）

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

DEMO效果图

插件思路

准备工作

获取时段

准备阶段的JS

时段函数JS

使用方法

项目地址

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

DEMO下载

微信小程序----当前时间的时段选择器插件（今天、本周、本月、本季度、本年、自定义时段）相关推荐

最新文章

热门文章