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


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 相关文章推荐
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
微信小程序template模板实例详解
Oct 27 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
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php随机输出名人名言的代码
2012/10/07 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
正规的求职信范文分享
2013/12/11 职场文书
优秀教师获奖感言
2014/01/31 职场文书
英文商务邀请函范文
2015/01/31 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android