Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序----当前时间的时段选择器插件(今天、本周、本月、本季度、本年、自定义时段)

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

作者头像
Rattenking
发布于 2021-02-01 02:50:51
发布于 2021-02-01 02:50:51
1.6K00
代码可运行
举报
文章被收录于专栏:RattenkingRattenking
运行总次数:0
代码可运行

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

DEMO效果图


插件思路


准备工作
  1. 获取当前时间,同时获取当前的年、月、日、周几;
  2. 创建处理日期数字的函数;
  3. 创建格式化日期的函数;
  4. 创建获取某月天数的函数;
  5. 创建获取季度开始的月份函数。

获取时段
  1. 创建获取当天的时段函数;
  2. 创建获取本周的时段函数;
  3. 创建获取本月的时段函数;
  4. 创建获取本季度的时段函数;
  5. 创建获取本年的时段函数;
  6. 创建自定义时段函数。

准备阶段的JS

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  //获取今天的日期
  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
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const GetPeriod = require("../../utils/getperiod.js");
  1. 使用getperiod.js
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
this.time = new GetPeriod();

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

项目地址

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
git clone git@github.com:Rattenking/GetPeriod.git

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/05/28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
js获取上周、本周、上月、本月、上季度、本季度的开始日期、结束日期(无bug)
/** * 获取上周、本周、上月、本月、上季度、本季度的开始日期、结束日期 start * 亲测无bug。获取上月开始结束日期考虑了年份的变化 */ var now = new Date(); //当前日期 var nowDayOfWeek = now.getDay()-1; //今天本周的第几天 var nowDay = now.getDate(); //当前日 var nowMonth = now.getMonth(); //当前月 var nowYear = now.getYear(); //当
用户1065635
2019/11/27
7.4K0
js日期计算及快速获取周、月、季度起止日
机缘巧合,这段接触了一下js,刚开始各种磕碰各种不顺手,一个日期计算都折腾我半天,积累了一些,赶紧码下:  
AhDung
2018/09/13
5.9K0
Java判断日期是不是当天、本周、本月、本季度、本年
这是一个java工具类,用于大多数需要判断日期是不是当天、本周、本月、本季度、本年,以更好的进行下一步判断, 那么如何去写代码吗?请直接看下面:
小颜同学
2023/08/22
2.8K0
微信小程序日期选择器显示当前系统年月日时分
话不多说,记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码:https://github.com/youzan/vant-weapp 中文文档:https://youzan.github.io/vant-weapp/#/intro
王小婷
2021/06/29
3.3K0
微信小程序-vant-weapp日期选择器的使用(年月日时分)
话不多说,记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码:https://github.com/youzan/vant-weapp 中文文档:https://youzan.github.io/vant-weapp/#/intro
王小婷
2021/06/22
7.6K1
微信小程序-vant-weapp日期选择器的使用(年月日时分)
微信小程序日期选择器(起始日期与终止日期)轮子复制粘贴直接用————modal组件
先上图。 每次开始默认获取当前选择的日期。 wxml <view class="beijing"> <view class="second"> <view class="second_1"> <view class="second_1_1"> <button bindtap="begin" type="primary">点击重选</button> </view> <view class="second_1_2">
啦啦啦啦
2023/02/11
7630
微信小程序日期选择器(起始日期与终止日期)轮子复制粘贴直接用————modal组件
vue 手写一个时间选择器
最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件。
小皮咖
2019/11/05
2.6K0
求本年、本月、本周等数据
本文转载:http://www.cnblogs.com/ethan-qi/archive/2013/05/14/3077371.html
跟着阿笨一起玩NET
2018/09/19
5840
Java获取时间/格式化日期代码总结
我们在Java开发过程中,少不了与时间打交道,比如根据两个日期得出相差的时分秒,时间加减,时间累加,前5分钟,前一个月,前一年,等等...所以我从网上搜集一些常用的时间/日期格式化代码,以飨读者。
浩Coding
2019/07/03
4.4K0
《手把手教你》系列技巧篇(三十八)-java+ selenium自动化测试-日历时间控件-下篇(详解教程)
  理想很丰满现实很骨感,在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这样的操作就有点难了。宏哥上一篇已经讲解了如何处理日历时间控件,但是对于第一种方法可能会遇到输入框是readonly的情况,那么第一种方法就不适用了,但是只要我们稍微的变通地处理一下,就又可以使用了。
北京-宏哥
2021/11/10
1.6K0
微信小程序提交form表单内容
王小婷
2025/05/20
720
微信小程序提交form表单内容
如何使用 React 构建自定义日期选择器(1)
在 web 上经常看到包含一个或多个日期的表单。无论是出生日期还是航班时间表日期,您总希望用户能够提供了有效的日期。
IMWeb前端团队
2019/12/03
6.6K0
如何使用 React 构建自定义日期选择器(1)
JAVA获取30天或某段范围日期的方法
这个示例使用了Java 8中的LocalDate类和DateTimeFormatter类来处理日期格式化。首先,我们创建一个formatter对象来定义日期格式(例如:“yyyy-MM-dd”)。然后,我们获取当前日期并创建一个空的列表来存储日期字符串。
张哥编程
2024/12/13
3680
JAVA获取30天或某段范围日期的方法
Java实用工具类二:时间格式转换工具
此文仅对自己工作中用到的类进行总结,方便以后的使用。 类一: package com.cn.hnust.util; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; public class DateUtil { /** * 获取起止日期 * @param sdf 需要显示的日期格式 * @param date 需要参照的日期 *
芈亓
2022/06/17
1.4K0
微信小程序校历组件
首先得根据年月将本月的日历打印出来,使用util.formatDate("yyyy-MM-01", date)获取本月的1号的Data对象,然后计算他是本周的周几,使用Date.addDate()将日期转到1号所在的那周的周一,就是本月日历要打印的第一天,由于校历一般是周一作为一周的开始,所以需要稍微处理一下,不能直接减掉周次来将Date对象指向打印日历的第一天。 由于每月的日历最多是五个周,所以我们直接打印五个周的时间即可,使用Date.addDate()将日期一天一天累加,并将数据保存即可。 对于日期的样式,我是用了相对比较简单的办法,通过if判断日期来给予其特定的样式,我是将不同的class拼接为字符串赋值到unitObj上的,对于显示的颜色等,通过css的优先级控制,单元样式继承于容器,对于需要特定现实的样式提供一个detach字段保存。 跳转日期则直接获取时间来拼接月份然后调用日历月份处理方法即可。
WindRunnerMax
2020/08/27
1.1K0
微信小程序校历组件
10个实用的工具函数
new Array 创建的数组只是添加了length属性,并没有实际的内容。通过扩展后,变为可用数组用于循环
WahFung
2020/08/24
5060
微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理
§ 页面逻辑处理 本文配套视频地址: https://v.qq.com/x/page/n0554dndrez.html 开始前请把 ch3-2 分支中的 code/ 目录导入微信开发工具  
iKcamp
2018/01/04
9070
微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理
好多Javascript日期选择器呀-5
<TITLE>最精致的日历式日期输入控件 (Smart Ver 1.00)</TITLE>
Java架构师必看
2021/03/22
1.2K0
微信小程序日期+时间选择器
这种内置定义好的选择器都是从底部弹起。目前支持五种选择器,通过设置mode来区分。分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
李才哥
2019/07/10
7.7K0
微信小程序日期+时间选择器
用react手写一个简单的日历
日历其实大家都很熟悉,一切的设计都是从功能出发,这是根本。日历的功能分为两大块。
用户3806669
2021/07/06
4K0
用react手写一个简单的日历
推荐阅读
相关推荐
js获取上周、本周、上月、本月、上季度、本季度的开始日期、结束日期(无bug)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验