zoukankan      html  css  js  c++  java
  • 微信小程序----当前时间的时段选择器插件(今天、本周、本月、本季度、本年、自定义时段)

    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");
    1. 使用getperiod.js
    this.time = new GetPeriod();
    
    //获取本年的结束日期
    let end = this.time.getYearEndDate();

    项目地址

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

    git clone git@github.com:Rattenking/GetPeriod.git

    DEMO下载

    我的博客,欢迎交流!

    我的CSDN博客,欢迎交流!

    微信小程序专栏

    前端笔记专栏

    微信小程序实现部分高德地图功能的DEMO下载

    微信小程序实现MUI的部分效果的DEMO下载

    微信小程序实现MUI的GIT项目地址

    微信小程序实例列表

    前端笔记列表

    游戏列表

  • 相关阅读:
    20181113-2 每周例行报告
    20181030-4 每周例行报告
    20180925-5 代码规范,结对要求
    20181023-3 每周例行报告
    20181016-10 每周例行报告
    PSP总结报告
    作业要求 20181204-1 每周例行报告
    公开感谢
    附加作业 软件工程原则的应用实例分析
    作业要求 20181127-2每周例行报告
  • 原文地址:https://www.cnblogs.com/linewman/p/9918441.html
Copyright © 2011-2022 走看看