0.2.0 • Published 5 years ago
calendar-helper v0.2.0
calendar-helper
一个生成日历数据的工具;
重要版本变更
- 0.2.0:精简优化,删除获取多个月份的功能(getCalendar),让该库的功能更单一;现在一次只能获取一个月的数据,需要多个月份数据的,在调用处加循环多次调用即可;
- 0.1.2:添加 monday 参数,支持配置周一到周日、周日到周六的数据排列方式;修改文档中部分描述不当的文案;
- 0.1.0:默认引用路径改为require方式,import路径改为'calendar-helper/index'
- 0.0.x:在vue中引用,并未考虑require的情况
安装
$ npm install calendar-helper
数据结构
日历数据
本工具生成结果为一个月的日历数据,数据类型为一个二维数组,每行有7列,对应一周7天,共4-6行,对应月份里的几个周;首尾行中,可能会包含前后月份的数据;例如2022年3月份数据如下:
[
[{day:27,...}, {day:28,...}, {day:1,...}, {day:2,...}, {day:3,...}, {day:4,...}, {day:5,...}] ,
.
.
[{day:27,...}, {day:28,...}, {day:29,...}, {day:30,...}, {day:31,...}, {day:1,...}, {day:2,...}]
],
日期对象
每个日期对象中,除了包含上面的day字段外,还有其他一些实用的字段,完整字段如下:
{
curMonth: Number (-1,0,1), // 是否为当前月份的数据,首尾行可能会有前后月份的数据(第一个参数d对应的月份),0:当前月,-1:上一个月,1:下一个月
today: Boolean, // 是否为当前日期(是否为传入参数curDate对应的日期)
date: Date, // 当前这一天的日期对象
ts: Number, // 当前这一天的时间戳
year: Number, // 当前这一天的年
month: Number, // 当前这一天的月,值范围:1-12
day: Number, // 当前这一天的日,值范围:1-31
week: Number, // 当前这一天是周几,值范围:0-6
weekIdx: Number, // 当前这一天属于该月的第几周,值范围:1-6
days: Number, // 当前这一个月的天数,取值范围:28-31
dateStr: String ('2018-10-31'), // 当前这一天的日期字符串
}
引用
Node
var calendarHelper = require('calendar-helper'); // require引用
import CalendarHelper from 'calendar-helper/index'; // es6 import引用,可用于vue中
浏览器
<script src='./dist/index.js'></script>
以 amd 或 cmd 模式引入,如果环境不支持 amd 或 cmd,挂载到window上,window.calendarHelper;
点击此处查看测试页面
// seajs测试
seajs.use('calendarHelper', function (calendarHelper) {
console.log(calendarHelper);
});
// requirejs 测试
requirejs(['calendarHelper'], function (calendarHelper) {
console.log(calendarHelper);
});
// 浏览器原生
console.log(window.calendarHelper);
主方法
getMonthData(date, curDate, fixRows, monday)
本库的核心方法,生成一个月的日历数据; 返回值:当月的二维数组数据;
- date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串;
- curDate: date|number|string 需要选中的日期,格式为Date类型或时间戳或时间戳字符串;不传或格式错误,则默认选中今天,表现在对象的today属性上;
- fixRows: boolean 是否需要固定周数,每月有四周或五周或六周,如果设置为true:则统一返回六周,其他的用下个月来补;如果设为false,则只返回具有当前月份周数的数据;这个参数的使用场景大体是这个:在切换年月时,日历高度(周数)保持不变;
- monday: boolean 第一天是否为周一,即是否按照周一到周日的顺序排列数据;默认为false,按周日到周六的顺序排列;如果设置为true,则按照周一到周日的顺序排列;
let res1 = CalendarHelper.getMonthData(new Date(2018, 10)); // 获取2018-11月份的数据
let res2 = CalendarHelper.getMonthData(new Date(2018, 10), new Date(), true, true); // 获取2018-11月份的数据
辅助方法
辅助方法是在生成数据过程中用到的,也封装起来对外提供:
1. parseDate(date|string|number)
将参数转换为日期;
参数为日期对象、时间戳或时间戳字符串;
返回值:Date类型,如果参数是date类型,复制一个日期返回;参数不合法时,返回当前时间;
var date = CalendarHelper.parseDate(1541314815690);
var date1 = CalendarHelper.parseDate(new Date());
var date2 = CalendarHelper.parseDate('1541314815690');
2. getDays(date)
获取某个月份有多少天;
date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串;
返回值:Number类型,当前年月的天数;
3. getWeeks(date, monday)
获取某个月前后占用的周数
- date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串
- monday: boolean 第一天是否为周一,即是否按照周一到周日的顺序排列数据;默认为false,按周日到周六的顺序排列;如果设置为true,则按照周一到周日的顺序排列;
返回值:Number类型,当前年月所占用的周数
4. getWeekByDate(date, monday)
获取一个日期在这个月属于第几周
- date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串
- monday: boolean 第一天是否为周一,即是否按照周一到周日的顺序排列数据;默认为false,按周日到周六的顺序排列;如果设置为true,则按照周一到周日的顺序排列;
返回值:Number类型,当前年月的周数,取值范围 4-6;
5. getMonthFirstWeek(date)
获取一个月份第一天是周几
date: date|number|string 需要操作的时间,格式为Date类型或时间戳或时间戳字符串
返回值:Number类型,取值范围 0-6;
测试
$ npm test
HTML页面测试地址:点击查看测试结果