美文网首页深入解读JavaScript让前端飞
分享一个calendarTool.js工具集

分享一个calendarTool.js工具集

作者: 悟C | 来源:发表于2018-09-01 13:34 被阅读0次

在搬砖的过程中你是否和我一样,需要构建一些日历组件。最近我就在一个项目中需要构建两个不同类型的日历组件,构建了两个calendar组件后,感觉很有必要写封装一个calendar构建的工具集,于是就有了现在这个calendar_tool.js

npm install calendar_tool.js

API: (形参:date => date对象/date字符串):

* getLastDayForPrevMonth(date)                 // 返回:指定日期的上个月的最后一天
* getLastDayForCurrMonth(date)                 // 返回: 指定日期的最后一天
* getWeek(y, m, d)                            // 返回: 指定日期的星期值 0 ~ 6 (星期日 ~ 星期六)
* getWeekForCurrMonthLastDay(date)            // 返回:  指定日期的最后一天的星期值
* getWeekForCurrMonthFirstDay(date)           // 返回: 指定日期的第一天的星期值
* getCurrMonthDays(date)                      // 返回: 指定日期当月的所有day,类型为array
* getBeforeVacancyDays(date)                  // 返回: 指定日期第一天之前空缺day
* getAfterVacancyDays(date)                   // 返回: 指定日期最后一天之后空缺day
* isDate(date)                                // 是否为date对象
* isLegalDate(date)                          // 是否为合法的date对象

还有一个 API: getCalendarData(date) 返回一个对象,如下:

{
   y,                          // 年
   m,                         // 月  和getMonth()获取的结果一样,展示需要+1
   d,                         // 日
   w,                         // 星期  0 ~ 6 (星期日 ~ 星期六)
   days,                      // 当前月要展示的所有day(包括前后空缺位置的day), 类型:数组
   prevMonthVacancyDays,      // 当前月的前一部分空缺day
   nextMonthVacancyDays,      // 当前月的后一部分空缺day
   currMonthDays,             // 当前月的day
   currMonthLastDaysPos,      // 当前月最后一天在日历day列表的位置
   prevMonthLastDayPos,      // 上一个最后一天在日历day列表的位置
 };

下面就用calendarTool.js实现一个简单的React日历组件

效果图

完整代码请移步calendarTool.js,如果对你有帮助,请给个stars

相关文章

  • 分享一个calendarTool.js工具集

    在搬砖的过程中你是否和我一样,需要构建一些日历组件。最近我就在一个项目中需要构建两个不同类型的日历组件,构建了两个...

  • iOS质量保障工具集

    iOS质量保障工具集 iOS质量保障工具集

  • binutils工具集

    binutils工具集 GNU binutils是一个二进制工具集。主要包括:ld:gnu链接器;as:gnu汇编...

  • 2018-01-17-自动化扫描工具集

    1.第一个要介绍的是discover脚本,一个集成的被动信息收集工具,该工具集使用以下工具集(dnsrecon,g...

  • iOS-捷径Shortcut&工作流Workflow

    干货分享 捷径/Workflow工具集WeeeTools -「视频下载神器」 功能:复制视频的相关链接地址,自动下...

  • Linux操作系统下 Nginx安装部署手册(一)

    Nginx安装工具集 Nginx安装工具集包括Nginx,openssl,pcre以及zlib。约定:所有工具安装...

  • 工具集

    记录一些日常要用到的小工具,随时更新 接口管理eolinker 蓝湖--产品、设计、研发流程 Charles"傻瓜...

  • 工具集

    1 Http工具: Post Man 2脑图:Xmind 3开发工具: Eclipse或者Intea j 4数据库...

  • 工具集

    iterm2 go2shell 官网地址 /Applications/Go2Shell.app/Contents...

  • 没有找不到的工具,这个网站简直太强大了

    那么今天技能君就直接介绍几个超好用的工具集,让大家掌握这三个工具集后,相当于掌握上千个工具。 一个木函 这是一个功...

网友评论

    本文标题:分享一个calendarTool.js工具集

    本文链接:https://www.haomeiwen.com/subject/afpewftx.html