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

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

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

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

赞 (0)

相关推荐

  • 微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 微信小程序使用picker实现时间和日期选择框功能【附源码下载】

    本文实例讲述了微信小程序使用picker实现时间和日期选择框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange"> 当前城市选择:{{picker1Range[picker1Value]}} </pick

  • 微信小程序之picker日期和时间选择器

    微信小程序之picker日期和时间选择器

    下面来介绍小picker,分三种样式: 默认的自己可以定义数据的 mode="time"是时间选择器 mode="date"是日期选择器 跟其他的一样先来看下picker.wxml <view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <te

  • 微信小程序 选择器（时间，日期，地区）实例详解

    微信小程序 选择器（时间，日期，地区）实例详解

    微信小程序 选择器(时间,日期,地区) 微信小程序 开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti

  • 微信小程序时间选择插件使用详解

    微信小程序时间选择插件使用详解

    微信小程序时间选择插件-弹出选择,供大家参考,具体内容如下 wxml <modal class="modal" hidden="{{flag}}" no-cancel bindconfirm="getTime" confirmText="确定"> <view class="modal-content"> <view class="time_screens"

  • 微信小程序日期时间选择器使用方法

    微信小程序日期时间选择器使用方法

    本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}

  • 微信小程序时间控件picker view使用详解

    微信小程序时间控件picker view使用详解

    本文实例为大家分享了微信小程序时间控件的具体实现代码,供大家参考,具体内容如下 在原来基础上改了点,由于项目需要按照功能需求自己在原有的组件上改写的选择日期时间插件,但后来这个功能取消,所以整理下写下来 wxml: <view class="time_screens"> <view style="text-align:center;color:#45BCE8">{{year}}-{{month}}-{{day}} {{hour}}:{{min

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

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

    本文实例为大家分享了微信小程序当前时间时段选择器的实现代码,供大家参考,具体内容如下 DEMO效果图 插件思路 准备工作 获取当前时间,同时获取当前的年.月.日.周几: 创建处理日期数字的函数: 创建格式化日期的函数: 创建获取某月天数的函数: 创建获取季度开始的月份函数. 获取时段 创建获取当天的时段函数: 创建获取本周的时段函数: 创建获取本月的时段函数: 创建获取本季度的时段函数: 创建获取本年的时段函数: 创建自定义时段函数. 准备阶段的JS constructor() { this.n

  • 微信小程序全屏滚动字幕的实现方法详解

    微信小程序全屏滚动字幕的实现方法详解

    目录 一.实现背景 二.实现代码 三.滚动速度 四.后续优化 实现效果 一.实现背景 无意中在某音上看到用手机横屏作为广告屏的视频,大部分都是用第三方软件实现的: 以及在汽车后挡风玻璃放置提醒字样的视频,这种基本是要花钱买屏幕,通过手机控制屏幕内容: 遂想实现这种效果 二.实现代码 1,滚动字幕 zimu.wxml,界面布局,很简单,没啥特别的,顶部一个返回按钮,为了不影响整体效果,可以把这个按钮做成透明的图片放上去:除了那个按钮剩下的就是滚动的字幕组件了 <!--pages/zimu/zimu

  • 微信小程序整合使用富文本编辑器的方法详解

    微信小程序整合使用富文本编辑器的方法详解

    本文实例讲述了微信小程序整合使用富文本编辑器的方法.分享给大家供大家参考,具体如下: 使用WxParse插件实现小程序的富文本显示 ,下载地址:富文本插件WxParse 具体使用步骤: 1. 复制插件文件夹到项目根目录,emojis是表情包,可选择性删除 2. 在.js文件中引入WxParse模块 var WxParse= require('../../../wxParse/wxParse.js'); 3. 在.wxss文件中引入WxParse.wxss样式,也可以在app.wxss中引入 @i

  • 微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i

  • 让微信小程序支持ES6中Promise特性的方法详解

    让微信小程序支持ES6中Promise特性的方法详解

    遇到的问题 微信开发者工具更新版本后, 移除了开发者工具对 ES6 中 Promise 特性原生的支持, 理由是因为实体机器是不支持 Promise 的, 所以我们需要引入第三方的 Promise 库 微信更新日志 解决方案 下载第三方库 在这里我引入的是 Bluebird 库, 可以到Bluebird官网 下载需要的文件,也可以通过本地下载 Bluebrid 提供了两种已经构建好的完整的 Promise 库文件, 未经压缩的 bluebird.js 和已压缩的 bluebird.min.js

  • 微信小程序swiper轮播图组件使用方法详解

    本文实例为大家分享了微信小程序swiper轮播图组件的使用,供大家参考,具体内容如下 在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swiper.wxml--> <view class="container">     <swiper class="swiper-box" bind:change="swiperChange

  • 微信小程序3种位置API的使用方法详解

    微信小程序3种位置API的使用方法详解

    获取位置 获取当前的地理位置.速度.当用户离开小程序后,此接口无法调用:当用户点击"显示在聊天顶部"时,此接口可继续调用. wx.getLocation(object) <view class="container"> <button bindtap='getLocation'>获取位置</button> <view wx:if="{{latitude !=''}}"> <view>纬度

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

  • 微信小程序获取用户信息并保存登录状态详解

    微信小程序获取用户信息并保存登录状态详解

    前言 微信小程序的运行环境不是在浏览器下运行的.所以不能以cookie来维护登录态.下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧. 一.登录态维护 官方的文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject 通过 wx.login() 获取到用户登录态之后,需要维护登录态.开发者要注意不应该直接把 session_key.openid 等字段作为用户的标识或者 session

  • 微信小程序实现页面导航与传参功能详解

    微信小程序实现页面导航与传参功能详解

    目录 一.页面导航 概述 分类 声明式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 编程式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 导航传参 声明式导航传参 编程式导航传参 一.页面导航 概述 顾名思义,页面导航指的是页面之间的相互跳转, 而页面传参就是在加载页面时将特定的参数传递过去从而成为该页面的参数. 分类 声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转 编程式导航:通过调用小程序专门的导航API,实现页

随机推荐