分享一个calendarTool.js工具集
2018-09-01 本文已影响0人
悟C
在搬砖的过程中你是否和我一样,需要构建一些日历组件。最近我就在一个项目中需要构建两个不同类型的日历组件,构建了两个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
。