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

本文实例为大家分享了微信小程序当前时间时段选择器的实现代码，供大家参考，具体内容

本文实例为大家分享了微信小程序当前时间时段选择器的实现代码，供大家参考，具体内容如下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

微信小程序时间选择器插件 微信小程序时段选择器插件 微信小程序时间选择器 微信小程序选择器插件