@acusti/date-picker 0.2.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -0
- package/dist/DatePicker.js.flow +1 -1
- package/dist/MonthCalendar.js +2 -3
- package/dist/MonthCalendar.js.flow +1 -1
- package/dist/MonthCalendar.js.map +1 -1
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +6 -0
- package/dist/utils.js.flow +1 -0
- package/dist/utils.js.map +1 -1
- package/dist/utils.test.js +45 -3
- package/dist/utils.test.js.map +1 -1
- package/package.json +2 -2
- package/src/MonthCalendar.tsx +7 -3
- package/src/utils.test.ts +78 -3
- package/src/utils.ts +7 -0
package/README.md
CHANGED
|
@@ -7,3 +7,68 @@
|
|
|
7
7
|
|
|
8
8
|
A group of React components and utils for rendering a date picker with
|
|
9
9
|
support for ranges via a two-up month calendar view.
|
|
10
|
+
|
|
11
|
+
See the [storybook docs and demo][] to get a feel for what it can do.
|
|
12
|
+
|
|
13
|
+
[storybook docs and demo]:
|
|
14
|
+
https://acusti-uikit.netlify.app/?path=/docs/uikit-controls-datepicker-datepicker--docs
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
npm install @acusti/date-picker
|
|
20
|
+
# or
|
|
21
|
+
yarn add @acusti/date-picker
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Example
|
|
25
|
+
|
|
26
|
+
To render a two-up date picker for selecting date ranges, handling date
|
|
27
|
+
selections via the `onChange` prop and showing months using abbreviations:
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { DatePicker } from '@acusti/date-picker';
|
|
31
|
+
import { useCallback, useState } from 'react';
|
|
32
|
+
|
|
33
|
+
function Popover() {
|
|
34
|
+
const [dateRangeStart, setDateRangeStart] = useState<null | string>(
|
|
35
|
+
null,
|
|
36
|
+
);
|
|
37
|
+
const [dateRangeEnd, setDateRangeEnd] = useState<null | string>(null);
|
|
38
|
+
|
|
39
|
+
const handleDateRangeChange = useCallback(({ dateEnd, dateStart }) => {
|
|
40
|
+
setDateRangeStart(dateStart);
|
|
41
|
+
if (dateEnd) {
|
|
42
|
+
setDateRangeEnd(dateEnd);
|
|
43
|
+
}
|
|
44
|
+
}, []);
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<DatePicker
|
|
48
|
+
isRange
|
|
49
|
+
isTwoUp
|
|
50
|
+
onChange={handleDateRangeChange}
|
|
51
|
+
useMonthAbbreviations
|
|
52
|
+
/>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Props
|
|
58
|
+
|
|
59
|
+
This is the type signature for the props you can pass to `DatePicker`:
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
type Props = {
|
|
63
|
+
className?: string;
|
|
64
|
+
dateEnd?: Date | string | number;
|
|
65
|
+
dateStart?: Date | string | number;
|
|
66
|
+
initialMonth?: number;
|
|
67
|
+
isRange?: boolean;
|
|
68
|
+
isTwoUp?: boolean;
|
|
69
|
+
monthLimitFirst?: number;
|
|
70
|
+
monthLimitLast?: number;
|
|
71
|
+
onChange: (payload: { dateEnd?: string; dateStart: string }) => void;
|
|
72
|
+
useMonthAbbreviations?: boolean;
|
|
73
|
+
};
|
|
74
|
+
```
|
package/dist/DatePicker.js.flow
CHANGED
package/dist/MonthCalendar.js
CHANGED
|
@@ -2,7 +2,7 @@ import { Style } from '@acusti/styling';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
|
|
5
|
-
import { getMonthFromDate, getMonthNameFromMonth, getYearFromMonth } from './utils.js';
|
|
5
|
+
import { getLastDateFromMonth, getMonthFromDate, getMonthNameFromMonth, getYearFromMonth, } from './utils.js';
|
|
6
6
|
const { Fragment, useCallback } = React;
|
|
7
7
|
const DAYS = Array(7).fill(null);
|
|
8
8
|
export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }) {
|
|
@@ -10,8 +10,7 @@ export default function MonthCalendar({ className, dateEnd, dateEndPreview, date
|
|
|
10
10
|
title = title !== null && title !== void 0 ? title : `${getMonthNameFromMonth(month)} ${year}`;
|
|
11
11
|
const monthWithinYear = month % 12;
|
|
12
12
|
const firstDate = new Date(year, monthWithinYear, 1);
|
|
13
|
-
const
|
|
14
|
-
const lastDate = new Date(getYearFromMonth(nextMonth), nextMonth % 12, 1);
|
|
13
|
+
const lastDate = getLastDateFromMonth(month);
|
|
15
14
|
lastDate.setDate(lastDate.getDate() - 1);
|
|
16
15
|
const totalDays = lastDate.getDate();
|
|
17
16
|
const firstDay = firstDate.getDay();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,
|
|
1
|
+
{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"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"}
|
package/dist/utils.d.ts
CHANGED
|
@@ -2,3 +2,4 @@ export declare const getMonthFromDate: (date: Date) => number;
|
|
|
2
2
|
export declare const getYearFromMonth: (month: number) => number;
|
|
3
3
|
export declare const getMonthNameFromMonth: (month: number) => string;
|
|
4
4
|
export declare const getMonthAbbreviationFromMonth: (month: number) => string;
|
|
5
|
+
export declare const getLastDateFromMonth: (month: number) => Date;
|
package/dist/utils.js
CHANGED
|
@@ -32,4 +32,10 @@ export const getMonthAbbreviationFromMonth = (month) => {
|
|
|
32
32
|
return 'Sept';
|
|
33
33
|
return monthName.substring(0, 3);
|
|
34
34
|
};
|
|
35
|
+
export const getLastDateFromMonth = (month) => {
|
|
36
|
+
const nextMonth = month + 1;
|
|
37
|
+
const lastDate = new Date(getYearFromMonth(nextMonth), Math.abs(nextMonth % 12), 1);
|
|
38
|
+
lastDate.setDate(lastDate.getDate() - 1);
|
|
39
|
+
return lastDate;
|
|
40
|
+
};
|
|
35
41
|
//# sourceMappingURL=utils.js.map
|
package/dist/utils.js.flow
CHANGED
|
@@ -9,3 +9,4 @@ declare export var getMonthFromDate: (date: Date) => number;
|
|
|
9
9
|
declare export var getYearFromMonth: (month: number) => number;
|
|
10
10
|
declare export var getMonthNameFromMonth: (month: number) => string;
|
|
11
11
|
declare export var getMonthAbbreviationFromMonth: (month: number) => string;
|
|
12
|
+
declare export var getLastDateFromMonth: (month: number) => Date;
|
package/dist/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,oEAAoE;AACpE,MAAM,UAAU,GAAG,IAAI,CAAC;AACxB,MAAM,WAAW,GAAG;IAChB,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,MAAM;IACN,QAAQ;IACR,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;CACb,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,UAAU,CAAC;AAExE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,EAAE,CAC3C,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,kBAAkB;AAEtE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,UAAU,CAAC;AAEvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3D,IAAI,KAAK,GAAG,KAAK,GAAG,EAAE,CAAC;IACvB,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IACnC,IAAI,KAAK,GAAG,CAAC;QAAE,KAAK,GAAG,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAa,EAAE,EAAE;IAC3D,MAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,SAAS,KAAK,WAAW;QAAE,OAAO,MAAM,CAAC;IAC7C,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrC,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,oEAAoE;AACpE,MAAM,UAAU,GAAG,IAAI,CAAC;AACxB,MAAM,WAAW,GAAG;IAChB,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,MAAM;IACN,QAAQ;IACR,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;CACb,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,UAAU,CAAC;AAExE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,EAAE,CAC3C,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,kBAAkB;AAEtE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,UAAU,CAAC;AAEvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3D,IAAI,KAAK,GAAG,KAAK,GAAG,EAAE,CAAC;IACvB,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IACnC,IAAI,KAAK,GAAG,CAAC;QAAE,KAAK,GAAG,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAa,EAAE,EAAE;IAC3D,MAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,SAAS,KAAK,WAAW;QAAE,OAAO,MAAM,CAAC;IAC7C,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAa,EAAE,EAAE;IAClD,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;IAC5B,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACpF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC"}
|
package/dist/utils.test.js
CHANGED
|
@@ -1,16 +1,58 @@
|
|
|
1
1
|
import { describe, expect, it } from 'vitest';
|
|
2
|
-
import { getMonthFromDate, getMonthNameFromMonth } from './utils.js';
|
|
2
|
+
import { getMonthFromDate, getMonthNameFromMonth, getLastDateFromMonth, getYearFromMonth, } from './utils.js';
|
|
3
|
+
const INVALID_DATE = new Date('');
|
|
3
4
|
describe('@acusti/date-picker', () => {
|
|
4
5
|
describe('utils', () => {
|
|
6
|
+
describe('getMonthFromDate', () => {
|
|
7
|
+
it('returns the correct month digit for a post-unix epoch month', () => {
|
|
8
|
+
expect(getMonthFromDate(new Date(1970, 0, 8))).toBe(0); // january 8, 1970
|
|
9
|
+
expect(getMonthFromDate(new Date(1971, 11, 1))).toBe(23); // november 1, 1971
|
|
10
|
+
});
|
|
11
|
+
it('returns the correct month digit for a pre-unix epoch month', () => {
|
|
12
|
+
expect(getMonthFromDate(new Date(1969, 11, 31))).toBe(-1); // december 31, 1969
|
|
13
|
+
expect(getMonthFromDate(new Date(1968, 3, 30))).toBe(-21); // april 30, 1968
|
|
14
|
+
});
|
|
15
|
+
it('returns NaN for an Invalid Date', () => {
|
|
16
|
+
expect(getMonthFromDate(INVALID_DATE)).toBe(NaN);
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
describe('getYearFromMonth', () => {
|
|
20
|
+
it('returns the correct year for a post-unix epoch date', () => {
|
|
21
|
+
expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 1)))).toBe(1970);
|
|
22
|
+
expect(getYearFromMonth(getMonthFromDate(new Date(2048, 4, 31)))).toBe(2048);
|
|
23
|
+
});
|
|
24
|
+
it('returns the correct year digit for a pre-unix epoch date', () => {
|
|
25
|
+
expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 0)))).toBe(1969);
|
|
26
|
+
expect(getYearFromMonth(getMonthFromDate(new Date(100, 11, 31)))).toBe(100);
|
|
27
|
+
});
|
|
28
|
+
it('returns NaN for an Invalid Date', () => {
|
|
29
|
+
expect(getYearFromMonth(getMonthFromDate(INVALID_DATE))).toBe(NaN);
|
|
30
|
+
});
|
|
31
|
+
});
|
|
5
32
|
describe('getMonthNameFromMonth', () => {
|
|
6
33
|
it('returns the correct month name for a post-unix epoch month', () => {
|
|
7
34
|
expect(getMonthNameFromMonth(getMonthFromDate(new Date(2023, 5, 19)))).toBe('June');
|
|
8
35
|
});
|
|
9
36
|
it('returns the correct month name for a pre-unix epoch month', () => {
|
|
10
|
-
expect(getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5,
|
|
37
|
+
expect(getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 2)))).toBe('June');
|
|
11
38
|
});
|
|
12
39
|
it('returns an empty string if given NaN (e.g. if dealing with an Invalid Date)', () => {
|
|
13
|
-
expect(getMonthNameFromMonth(getMonthFromDate(
|
|
40
|
+
expect(getMonthNameFromMonth(getMonthFromDate(INVALID_DATE))).toBe('');
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
describe('getLastDateFromMonth', () => {
|
|
44
|
+
it('returns the date of the last day for a post-unix epoch month', () => {
|
|
45
|
+
expect(getLastDateFromMonth(getMonthFromDate(new Date(2008, 2, 13)))).toEqual(new Date(2008, 2, 31));
|
|
46
|
+
// february in a leap year
|
|
47
|
+
expect(getLastDateFromMonth(getMonthFromDate(new Date(2024, 1, 23)))).toEqual(new Date(2024, 1, 29));
|
|
48
|
+
// february in a non-leap year
|
|
49
|
+
expect(getLastDateFromMonth(getMonthFromDate(new Date(1985, 1, 1)))).toEqual(new Date(1985, 1, 28));
|
|
50
|
+
});
|
|
51
|
+
it('returns the correct date for a pre-unix epoch month', () => {
|
|
52
|
+
expect(getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)))).toEqual(new Date(1865, 5, 30));
|
|
53
|
+
});
|
|
54
|
+
it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
|
|
55
|
+
expect(getLastDateFromMonth(getMonthFromDate(INVALID_DATE))).toEqual(INVALID_DATE);
|
|
14
56
|
});
|
|
15
57
|
});
|
|
16
58
|
});
|
package/dist/utils.test.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../src/utils.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,
|
|
1
|
+
{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../src/utils.test.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/date-picker",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"exports": "./dist/index.js",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"vitest": "^1.1.0"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@acusti/styling": "^0.7.
|
|
56
|
+
"@acusti/styling": "^0.7.2",
|
|
57
57
|
"clsx": "^2"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
package/src/MonthCalendar.tsx
CHANGED
|
@@ -3,7 +3,12 @@ import clsx from 'clsx';
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
|
|
5
5
|
import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
getLastDateFromMonth,
|
|
8
|
+
getMonthFromDate,
|
|
9
|
+
getMonthNameFromMonth,
|
|
10
|
+
getYearFromMonth,
|
|
11
|
+
} from './utils.js';
|
|
7
12
|
|
|
8
13
|
export type Props = {
|
|
9
14
|
className?: string;
|
|
@@ -38,8 +43,7 @@ export default function MonthCalendar({
|
|
|
38
43
|
title = title ?? `${getMonthNameFromMonth(month)} ${year}`;
|
|
39
44
|
const monthWithinYear = month % 12;
|
|
40
45
|
const firstDate = new Date(year, monthWithinYear, 1);
|
|
41
|
-
const
|
|
42
|
-
const lastDate = new Date(getYearFromMonth(nextMonth), nextMonth % 12, 1);
|
|
46
|
+
const lastDate = getLastDateFromMonth(month);
|
|
43
47
|
lastDate.setDate(lastDate.getDate() - 1);
|
|
44
48
|
const totalDays = lastDate.getDate();
|
|
45
49
|
const firstDay = firstDate.getDay();
|
package/src/utils.test.ts
CHANGED
|
@@ -1,9 +1,56 @@
|
|
|
1
1
|
import { describe, expect, it } from 'vitest';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
getMonthFromDate,
|
|
5
|
+
getMonthNameFromMonth,
|
|
6
|
+
getLastDateFromMonth,
|
|
7
|
+
getYearFromMonth,
|
|
8
|
+
} from './utils.js';
|
|
9
|
+
|
|
10
|
+
const INVALID_DATE = new Date('');
|
|
4
11
|
|
|
5
12
|
describe('@acusti/date-picker', () => {
|
|
6
13
|
describe('utils', () => {
|
|
14
|
+
describe('getMonthFromDate', () => {
|
|
15
|
+
it('returns the correct month digit for a post-unix epoch month', () => {
|
|
16
|
+
expect(getMonthFromDate(new Date(1970, 0, 8))).toBe(0); // january 8, 1970
|
|
17
|
+
expect(getMonthFromDate(new Date(1971, 11, 1))).toBe(23); // november 1, 1971
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
it('returns the correct month digit for a pre-unix epoch month', () => {
|
|
21
|
+
expect(getMonthFromDate(new Date(1969, 11, 31))).toBe(-1); // december 31, 1969
|
|
22
|
+
expect(getMonthFromDate(new Date(1968, 3, 30))).toBe(-21); // april 30, 1968
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
it('returns NaN for an Invalid Date', () => {
|
|
26
|
+
expect(getMonthFromDate(INVALID_DATE)).toBe(NaN);
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
describe('getYearFromMonth', () => {
|
|
31
|
+
it('returns the correct year for a post-unix epoch date', () => {
|
|
32
|
+
expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 1)))).toBe(
|
|
33
|
+
1970,
|
|
34
|
+
);
|
|
35
|
+
expect(getYearFromMonth(getMonthFromDate(new Date(2048, 4, 31)))).toBe(
|
|
36
|
+
2048,
|
|
37
|
+
);
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
it('returns the correct year digit for a pre-unix epoch date', () => {
|
|
41
|
+
expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 0)))).toBe(
|
|
42
|
+
1969,
|
|
43
|
+
);
|
|
44
|
+
expect(getYearFromMonth(getMonthFromDate(new Date(100, 11, 31)))).toBe(
|
|
45
|
+
100,
|
|
46
|
+
);
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
it('returns NaN for an Invalid Date', () => {
|
|
50
|
+
expect(getYearFromMonth(getMonthFromDate(INVALID_DATE))).toBe(NaN);
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
|
|
7
54
|
describe('getMonthNameFromMonth', () => {
|
|
8
55
|
it('returns the correct month name for a post-unix epoch month', () => {
|
|
9
56
|
expect(
|
|
@@ -13,12 +60,40 @@ describe('@acusti/date-picker', () => {
|
|
|
13
60
|
|
|
14
61
|
it('returns the correct month name for a pre-unix epoch month', () => {
|
|
15
62
|
expect(
|
|
16
|
-
getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5,
|
|
63
|
+
getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 2))),
|
|
17
64
|
).toBe('June');
|
|
18
65
|
});
|
|
19
66
|
|
|
20
67
|
it('returns an empty string if given NaN (e.g. if dealing with an Invalid Date)', () => {
|
|
21
|
-
expect(getMonthNameFromMonth(getMonthFromDate(
|
|
68
|
+
expect(getMonthNameFromMonth(getMonthFromDate(INVALID_DATE))).toBe('');
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
describe('getLastDateFromMonth', () => {
|
|
73
|
+
it('returns the date of the last day for a post-unix epoch month', () => {
|
|
74
|
+
expect(
|
|
75
|
+
getLastDateFromMonth(getMonthFromDate(new Date(2008, 2, 13))),
|
|
76
|
+
).toEqual(new Date(2008, 2, 31));
|
|
77
|
+
// february in a leap year
|
|
78
|
+
expect(
|
|
79
|
+
getLastDateFromMonth(getMonthFromDate(new Date(2024, 1, 23))),
|
|
80
|
+
).toEqual(new Date(2024, 1, 29));
|
|
81
|
+
// february in a non-leap year
|
|
82
|
+
expect(
|
|
83
|
+
getLastDateFromMonth(getMonthFromDate(new Date(1985, 1, 1))),
|
|
84
|
+
).toEqual(new Date(1985, 1, 28));
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
it('returns the correct date for a pre-unix epoch month', () => {
|
|
88
|
+
expect(
|
|
89
|
+
getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2))),
|
|
90
|
+
).toEqual(new Date(1865, 5, 30));
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
|
|
94
|
+
expect(getLastDateFromMonth(getMonthFromDate(INVALID_DATE))).toEqual(
|
|
95
|
+
INVALID_DATE,
|
|
96
|
+
);
|
|
22
97
|
});
|
|
23
98
|
});
|
|
24
99
|
});
|
package/src/utils.ts
CHANGED
|
@@ -35,3 +35,10 @@ export const getMonthAbbreviationFromMonth = (month: number) => {
|
|
|
35
35
|
if (monthName === 'September') return 'Sept';
|
|
36
36
|
return monthName.substring(0, 3);
|
|
37
37
|
};
|
|
38
|
+
|
|
39
|
+
export const getLastDateFromMonth = (month: number) => {
|
|
40
|
+
const nextMonth = month + 1;
|
|
41
|
+
const lastDate = new Date(getYearFromMonth(nextMonth), Math.abs(nextMonth % 12), 1);
|
|
42
|
+
lastDate.setDate(lastDate.getDate() - 1);
|
|
43
|
+
return lastDate;
|
|
44
|
+
};
|