微信小程序如何使用当前时间选择器插件？

本文共计1041个文字，预计阅读时间需要5分钟。

本文以大家庭分享的微信小程序为例，展示了当前时间段选择器的实现代码。以下是大致内容：

DEMO效果图


插件思路

准备工作

获取当前时间

javascript// 获取当前时间function getCurrentTime() { const now=new Date(); const year=now.getFullYear(); const month=now.getMonth() + 1; // 月份是从0开始的 const day=now.getDate(); const week=now.getDay(); return { year, month, day, week };}

同时获取年、月、日、周

javascript// 获取年、月、日、周function getDateTime() { const { year, month, day, week }=getCurrentTime(); return `${year}-${month}-${day}（${['日', '一', '二', '三', '四', '五', '六'][week]}）`;}

创建当前时间

javascript// 创建当前时间function createCurrentTime() { const dateTime=getDateTime(); const div=document.createElement('div'); div.innerText=`当前时间：${dateTime}`; return div;}

整合以上代码

javascript// 整合以上代码function init() { const currentTimeDiv=createCurrentTime(); document.body.appendChild(currentTimeDiv);}

init();

以上代码展示了如何创建一个简单的当前时间显示功能，可以根据实际需求进行调整和扩展。

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

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

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