playbook_ui 12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869 → 12.28.0.pre.alpha.PLAY814removemomentjs871
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date/_date.tsx +7 -8
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -26
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +95 -102
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -18
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -15
- data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -84
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -38
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -3
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +2 -3
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +45 -31
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +5 -3
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +24 -21
- data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
- data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +6 -8
- data/app/pb_kits/playbook/pb_kit/dateTime.ts +139 -67
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +52 -31
- data/app/pb_kits/playbook/pb_message/_message.tsx +25 -25
- data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_time/_time.tsx +9 -11
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +46 -49
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +4 -6
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +10 -10
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +8 -11
- data/dist/playbook-rails.js +7 -279
- data/lib/playbook/version.rb +1 -1
- metadata +1 -11
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb +0 -12
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb +0 -12
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx +0 -18
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +0 -17
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +0 -1
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -185
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +0 -75
- data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -120
@@ -3,7 +3,7 @@ import classnames from "classnames";
|
|
3
3
|
|
4
4
|
import { globalProps } from "../utilities/globalProps";
|
5
5
|
import { buildCss, buildDataProps } from "../utilities/props";
|
6
|
-
import DateTime from
|
6
|
+
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
8
8
|
import Body from "../pb_body/_body";
|
9
9
|
import Caption from "../pb_caption/_caption";
|
@@ -21,18 +21,16 @@ type DateRangeInlineProps = {
|
|
21
21
|
endDate?: Date;
|
22
22
|
};
|
23
23
|
|
24
|
-
const dateTimestamp = (dateValue: Date
|
25
|
-
const date = new DateTime({ value: dateValue });
|
24
|
+
const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
|
26
25
|
if (includeYear) {
|
27
|
-
return `${
|
26
|
+
return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`;
|
28
27
|
} else {
|
29
|
-
return `${
|
28
|
+
return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`;
|
30
29
|
}
|
31
30
|
};
|
32
31
|
|
33
|
-
const dateTimeIso = (dateValue: Date
|
34
|
-
|
35
|
-
return date.toIso();
|
32
|
+
const dateTimeIso = (dateValue: Date) => {
|
33
|
+
return DateTime.toIso(dateValue);
|
36
34
|
};
|
37
35
|
|
38
36
|
const DateRangeInline = (props: DateRangeInlineProps) => {
|
@@ -52,14 +50,17 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
|
|
52
50
|
<>
|
53
51
|
{icon && (
|
54
52
|
<>
|
55
|
-
<Body color="light"
|
56
|
-
|
57
|
-
className="pb_date_range_inline_icon"
|
58
|
-
dark={dark}
|
59
|
-
fixedWidth
|
60
|
-
icon="calendar-alt"
|
61
|
-
size={size}
|
53
|
+
<Body color="light"
|
54
|
+
key={Math.random()}
|
62
55
|
tag="span"
|
56
|
+
>
|
57
|
+
<Icon
|
58
|
+
className="pb_date_range_inline_icon"
|
59
|
+
dark={dark}
|
60
|
+
fixedWidth
|
61
|
+
icon="calendar-alt"
|
62
|
+
size={size}
|
63
|
+
tag="span"
|
63
64
|
/>
|
64
65
|
</Body>
|
65
66
|
</>
|
@@ -78,7 +79,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
|
|
78
79
|
|
79
80
|
const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
|
80
81
|
const dataProps = buildDataProps(data)
|
81
|
-
const renderTime = (date: Date
|
82
|
+
const renderTime = (date: Date) => {
|
82
83
|
return (
|
83
84
|
<time dateTime={dateTimeIso(date)}>
|
84
85
|
{dateInCurrentYear() ? (
|
@@ -92,24 +93,30 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
|
|
92
93
|
|
93
94
|
return (
|
94
95
|
<div
|
95
|
-
|
96
|
-
|
96
|
+
{...dataProps}
|
97
|
+
className={classnames(dateRangeClasses, globalProps(props), className)}
|
97
98
|
>
|
98
99
|
<div className="pb_date_range_inline_wrapper">
|
99
100
|
{size == "xs" && (
|
100
101
|
<>
|
101
102
|
{iconContent()}
|
102
|
-
<Caption dark={dark}
|
103
|
+
<Caption dark={dark}
|
104
|
+
tag="span"
|
105
|
+
>
|
103
106
|
{renderTime(startDate)}
|
104
107
|
</Caption>
|
105
|
-
<Caption dark={dark}
|
108
|
+
<Caption dark={dark}
|
109
|
+
tag="span"
|
110
|
+
>
|
106
111
|
<Icon
|
107
|
-
|
108
|
-
|
109
|
-
|
112
|
+
className="pb_date_range_inline_arrow"
|
113
|
+
fixedWidth
|
114
|
+
icon="long-arrow-right"
|
110
115
|
/>
|
111
116
|
</Caption>
|
112
|
-
<Caption dark={dark}
|
117
|
+
<Caption dark={dark}
|
118
|
+
tag="span"
|
119
|
+
>
|
113
120
|
{renderTime(endDate)}
|
114
121
|
</Caption>
|
115
122
|
</>
|
@@ -118,18 +125,25 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
|
|
118
125
|
{size == "sm" && (
|
119
126
|
<>
|
120
127
|
{iconContent()}
|
121
|
-
<Body dark={dark}
|
128
|
+
<Body dark={dark}
|
129
|
+
tag="span"
|
130
|
+
>
|
122
131
|
{renderTime(startDate)}
|
123
132
|
</Body>
|
124
|
-
<Body color="light"
|
125
|
-
<Icon
|
126
|
-
className="pb_date_range_inline_arrow"
|
133
|
+
<Body color="light"
|
127
134
|
dark={dark}
|
128
|
-
|
129
|
-
|
135
|
+
tag="span"
|
136
|
+
>
|
137
|
+
<Icon
|
138
|
+
className="pb_date_range_inline_arrow"
|
139
|
+
dark={dark}
|
140
|
+
fixedWidth
|
141
|
+
icon="long-arrow-right"
|
130
142
|
/>
|
131
143
|
</Body>
|
132
|
-
<Body dark={dark}
|
144
|
+
<Body dark={dark}
|
145
|
+
tag="span"
|
146
|
+
>
|
133
147
|
{renderTime(endDate)}
|
134
148
|
</Body>
|
135
149
|
</>
|
@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
|
|
14
14
|
className?: string | string[],
|
15
15
|
data?: string,
|
16
16
|
dark?: boolean,
|
17
|
-
endDate:
|
17
|
+
endDate: Date,
|
18
18
|
id?: string,
|
19
|
-
startDate:
|
19
|
+
startDate: Date,
|
20
20
|
}
|
21
21
|
|
22
22
|
const DateRangeStacked = (props: DateRangeStackedProps) => {
|
@@ -29,7 +29,9 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
|
|
29
29
|
const dataProps = buildDataProps(data)
|
30
30
|
|
31
31
|
return (
|
32
|
-
<div {...dataProps}
|
32
|
+
<div {...dataProps}
|
33
|
+
className={css}
|
34
|
+
>
|
33
35
|
<Flex vertical="center">
|
34
36
|
<FlexItem>
|
35
37
|
<DateYearStacked
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import React from "react";
|
2
2
|
|
3
3
|
import classnames from "classnames";
|
4
|
-
import DateTime from "../pb_kit/dateTime";
|
5
4
|
import { buildCss, buildDataProps } from "../utilities/props";
|
6
5
|
import { globalProps } from "../utilities/globalProps";
|
6
|
+
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
8
8
|
import Caption from "../pb_caption/_caption";
|
9
9
|
import Title from "../pb_title/_title";
|
@@ -14,7 +14,7 @@ type DateStackedProps = {
|
|
14
14
|
className?: string | string[];
|
15
15
|
dark?: boolean;
|
16
16
|
data?: string;
|
17
|
-
date:
|
17
|
+
date: Date;
|
18
18
|
size?: "sm" | "md";
|
19
19
|
id?: string;
|
20
20
|
reverse?: boolean;
|
@@ -45,39 +45,42 @@ const DateStacked = (props: DateStackedProps) => {
|
|
45
45
|
className
|
46
46
|
);
|
47
47
|
|
48
|
-
const currentYear = new Date().getFullYear()
|
49
|
-
const
|
50
|
-
const inputYear = dateTimestamp.toYear().toString();
|
48
|
+
const currentYear = new Date().getFullYear()
|
49
|
+
const inputYear = DateTime.toYear(date);
|
51
50
|
const dataProps = buildDataProps(data)
|
52
51
|
|
53
52
|
return (
|
54
53
|
<>
|
55
54
|
{bold == false ? (
|
56
|
-
<div {...dataProps}
|
55
|
+
<div {...dataProps}
|
56
|
+
className={classes}
|
57
|
+
>
|
57
58
|
<div className="pb_date_stacked_day_month">
|
58
|
-
<Caption text={
|
59
|
+
<Caption text={DateTime.toMonth(date).toUpperCase()} />
|
59
60
|
<Title
|
60
|
-
|
61
|
-
|
62
|
-
|
61
|
+
dark={dark}
|
62
|
+
size={sizes[size]}
|
63
|
+
text={DateTime.toDay(date).toString()}
|
63
64
|
/>
|
64
65
|
</div>
|
65
66
|
{currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
|
66
67
|
</div>
|
67
68
|
) : (
|
68
|
-
<div {...dataProps}
|
69
|
+
<div {...dataProps}
|
70
|
+
className={classes}
|
71
|
+
>
|
69
72
|
<div className="pb_date_stacked_day_month">
|
70
|
-
<Title
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
73
|
+
<Title
|
74
|
+
bold
|
75
|
+
dark={dark}
|
76
|
+
size="4"
|
77
|
+
text={DateTime.toMonth(date)}
|
75
78
|
/>
|
76
|
-
<Title
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
79
|
+
<Title
|
80
|
+
bold
|
81
|
+
dark={dark}
|
82
|
+
size="4"
|
83
|
+
text={DateTime.toDay(date).toString()}
|
81
84
|
/>
|
82
85
|
{currentYear != inputYear && <Title size="4">{inputYear}</Title>}
|
83
86
|
</div>
|
@@ -89,7 +89,7 @@ describe('DateTime Kit', () => {
|
|
89
89
|
const kit = screen.getByTestId(testId)
|
90
90
|
const text = kit.querySelector('.pb_time_kit_md.ml_sm')
|
91
91
|
|
92
|
-
expect(text.textContent).toEqual('2:00p
|
92
|
+
expect(text.textContent).toEqual('2:00p GMT+9')
|
93
93
|
})
|
94
94
|
test('renders DatePicker size', () => {
|
95
95
|
render(
|
@@ -34,7 +34,7 @@ test('renders time in default timezone', () => {
|
|
34
34
|
test('renders time in timezone', () => {
|
35
35
|
props.timeZone = 'Asia/Tokyo'
|
36
36
|
const kit = renderKit(DateTimeStacked, props)
|
37
|
-
expect(kit).toHaveTextContent(`${monthDayYear}2:
|
37
|
+
expect(kit).toHaveTextContent(`${monthDayYear}2:00aGMT+9`)
|
38
38
|
})
|
39
39
|
|
40
40
|
test('renders time in timezone', () => {
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
|
-
import DateTime from '../pb_kit/dateTime'
|
5
4
|
import { buildCss, buildDataProps } from '../utilities/props'
|
6
5
|
import { globalProps } from '../utilities/globalProps'
|
6
|
+
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
8
8
|
import Body from '../pb_body/_body'
|
9
9
|
import Title from '../pb_title/_title'
|
@@ -13,13 +13,12 @@ type DateYearStackedProps = {
|
|
13
13
|
className?: string | string[],
|
14
14
|
dark?: boolean,
|
15
15
|
data?: string,
|
16
|
-
date:
|
16
|
+
date: Date,
|
17
17
|
id?: string,
|
18
18
|
}
|
19
19
|
|
20
20
|
const DateYearStacked = (props: DateYearStackedProps) => {
|
21
21
|
const { align = 'left', className, dark = false, date, data={} } = props
|
22
|
-
const dateTimestamp = new DateTime({ value: date })
|
23
22
|
const css = classnames(
|
24
23
|
buildCss('pb_date_year_stacked', align),
|
25
24
|
globalProps(props),
|
@@ -29,15 +28,14 @@ const DateYearStacked = (props: DateYearStackedProps) => {
|
|
29
28
|
|
30
29
|
return (
|
31
30
|
<div {...dataProps}
|
32
|
-
|
31
|
+
className={css}
|
32
|
+
>
|
33
33
|
<Title
|
34
34
|
dark={dark}
|
35
35
|
size={4}
|
36
|
-
text={`${
|
37
|
-
.toMonth()
|
38
|
-
.toUpperCase()}`}
|
36
|
+
text={`${DateTime.toDay(date)} ${DateTime.toMonth(date).toUpperCase()}`}
|
39
37
|
/>
|
40
|
-
<Body color="light">{
|
38
|
+
<Body color="light">{DateTime.toYear(date)}</Body>
|
41
39
|
</div>
|
42
40
|
)
|
43
41
|
}
|
@@ -1,90 +1,162 @@
|
|
1
|
-
|
2
|
-
import moment, { Moment } from 'moment'
|
3
|
-
import 'moment-strftime'
|
4
|
-
import 'moment-timezone'
|
5
|
-
|
6
|
-
type DateTimeType = {
|
7
|
-
value: string | Date,
|
8
|
-
zone?: string,
|
9
|
-
}
|
10
|
-
|
11
1
|
const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
|
12
2
|
|
13
|
-
|
14
|
-
value: Moment & any
|
15
|
-
constructor({ value, zone = 'America/New_York' }: DateTimeType) {
|
16
|
-
this.value = this.convertToTimestampZone(value, zone)
|
17
|
-
}
|
18
|
-
|
19
|
-
convertToTimestampZone(value: string | Date, zone: string) {
|
20
|
-
return moment(value).tz(zone)
|
21
|
-
}
|
22
|
-
|
23
|
-
convertToTimezone() {
|
24
|
-
return this.value.strftime('%Z')
|
25
|
-
}
|
3
|
+
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
26
4
|
|
27
|
-
|
28
|
-
return this.value.strftime(format)
|
29
|
-
}
|
5
|
+
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
30
6
|
|
31
|
-
|
32
|
-
|
7
|
+
export const toMinute = (newDate: Date, timeZone?: string): string => {
|
8
|
+
const date = new Date(newDate)
|
9
|
+
if (timeZone) {
|
10
|
+
return date.toLocaleTimeString(undefined, {timeZone, hour: "2-digit", minute: "2-digit"}).slice(3, 5);
|
11
|
+
} else {
|
12
|
+
return date.toLocaleTimeString(undefined, {hour: "2-digit", minute: "2-digit"}).slice(3, 5);
|
33
13
|
}
|
14
|
+
}
|
34
15
|
|
35
|
-
|
36
|
-
|
16
|
+
export const toHour = (newDate: Date, timeZone?: string): string => {
|
17
|
+
const date = new Date(newDate)
|
18
|
+
if (timeZone) {
|
19
|
+
return date.toLocaleTimeString(undefined, {timeZone, hour: "numeric"}).split(' ')[0];
|
20
|
+
} else {
|
21
|
+
return date.toLocaleTimeString(undefined, {hour: "numeric"}).split(' ')[0];
|
37
22
|
}
|
23
|
+
}
|
38
24
|
|
39
|
-
|
40
|
-
|
41
|
-
|
25
|
+
export const toDay = (newDate: Date, timeZone?: string): number => {
|
26
|
+
if (timeZone) {
|
27
|
+
const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
|
28
|
+
return date.getUTCDate()
|
29
|
+
} else {
|
30
|
+
const date = new Date(newDate)
|
31
|
+
return date.getUTCDate()
|
32
|
+
}
|
33
|
+
}
|
42
34
|
|
43
|
-
|
44
|
-
|
45
|
-
|
35
|
+
export const toDayAbbr = (newDate: Date): string => {
|
36
|
+
const date = new Date(newDate)
|
37
|
+
return ABBR_DAYS[date.getUTCDay()]
|
38
|
+
}
|
46
39
|
|
47
|
-
|
48
|
-
|
49
|
-
|
40
|
+
export const toWeekday = (newDate: Date): string => {
|
41
|
+
const date = new Date(newDate)
|
42
|
+
return days[date.getUTCDay()]
|
43
|
+
}
|
50
44
|
|
51
|
-
|
52
|
-
|
53
|
-
|
45
|
+
export const toMonth = (newDate: Date, timeZone?: string): string => {
|
46
|
+
if (timeZone) {
|
47
|
+
const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
|
48
|
+
return months[date.getUTCMonth()]
|
49
|
+
} else {
|
50
|
+
const date = new Date(newDate)
|
51
|
+
return months[date.getUTCMonth()]
|
52
|
+
}
|
53
|
+
}
|
54
54
|
|
55
|
-
|
56
|
-
|
57
|
-
|
55
|
+
export const toMonthNum = (newDate: Date): number => {
|
56
|
+
const date = new Date(newDate)
|
57
|
+
return date.getUTCMonth() +1
|
58
|
+
}
|
58
59
|
|
59
|
-
|
60
|
-
|
61
|
-
|
60
|
+
export const toYear = (newDate: Date, timeZone?: string): number => {
|
61
|
+
if (timeZone) {
|
62
|
+
const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
|
63
|
+
return date.getUTCFullYear()
|
64
|
+
} else {
|
65
|
+
const date = new Date(newDate)
|
66
|
+
return date.getUTCFullYear()
|
67
|
+
}
|
68
|
+
}
|
62
69
|
|
63
|
-
|
64
|
-
|
70
|
+
export const toTime = (newDate: Date, timeZone?: string): string => {
|
71
|
+
const date = new Date(newDate)
|
72
|
+
if (timeZone) {
|
73
|
+
return date.toLocaleTimeString(undefined, {timeZone, timeStyle: "short"}).split(' ')[0];
|
74
|
+
} else {
|
75
|
+
return date.toLocaleTimeString(undefined, {timeStyle: "short"}).split(' ')[0];
|
65
76
|
}
|
77
|
+
}
|
66
78
|
|
67
|
-
|
68
|
-
|
69
|
-
|
79
|
+
export const toMeridiem = (newDate: Date, timeZone?: string): string => {
|
80
|
+
const date = new Date(newDate)
|
81
|
+
if (timeZone) {
|
82
|
+
return date.toLocaleString(undefined, {timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
|
83
|
+
} else {
|
84
|
+
return date.toLocaleString(undefined, {hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
|
85
|
+
}
|
86
|
+
}
|
70
87
|
|
71
|
-
|
72
|
-
|
73
|
-
|
88
|
+
export const toTimeZone = (newDate: Date, timeZone?: string): string => {
|
89
|
+
const date = new Date(newDate)
|
90
|
+
if (timeZone) {
|
91
|
+
return date.toLocaleString(undefined, {timeZone, timeZoneName: "short"}).split(' ')[3];
|
92
|
+
} else {
|
93
|
+
return date.toLocaleString(undefined, {timeZoneName: "short"}).split(' ')[3];
|
94
|
+
}
|
95
|
+
}
|
74
96
|
|
75
|
-
|
76
|
-
|
97
|
+
export const toTimeWithMeridiem = (newDate: Date, timeZone: string): string => {
|
98
|
+
const date = new Date(newDate)
|
99
|
+
return `${toTime(date, timeZone)}${toMeridiem(date, timeZone)}`;
|
100
|
+
}
|
77
101
|
|
78
|
-
|
79
|
-
|
80
|
-
return
|
81
|
-
|
102
|
+
export const toIso = (newDate: Date): string => {
|
103
|
+
const date = new Date(newDate)
|
104
|
+
return date.toISOString()
|
105
|
+
}
|
82
106
|
|
83
|
-
|
84
|
-
|
85
|
-
|
107
|
+
export const fromNow = (newDate: Date): string => {
|
108
|
+
|
109
|
+
const startDate = new Date(newDate).getTime()
|
110
|
+
const endDate = new Date().getTime()
|
111
|
+
const elapsedTime = endDate - startDate
|
112
|
+
let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
|
113
|
+
|
114
|
+
const elapsedTimeData = [
|
115
|
+
{ min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
|
116
|
+
{ min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
|
117
|
+
{ min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, // 90s-44 minutes
|
118
|
+
{ min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
|
119
|
+
{ min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
|
120
|
+
{ min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
|
121
|
+
{ min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
|
122
|
+
{ min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
|
123
|
+
{ min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / 30.44 * 24 * 60 * 60 * 1000)} months ago`}, // 60-319 days
|
124
|
+
{ min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
|
125
|
+
];
|
126
|
+
|
127
|
+
for (const timeDate of elapsedTimeData) {
|
128
|
+
if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
|
129
|
+
elapsedTimeString = timeDate.value;
|
130
|
+
break;
|
131
|
+
}
|
132
|
+
}
|
133
|
+
|
134
|
+
return elapsedTimeString
|
135
|
+
}
|
86
136
|
|
87
|
-
|
88
|
-
|
137
|
+
export const toCustomFormat = (newDate: Date, format = 'month_day'): string => {
|
138
|
+
const date = new Date(newDate)
|
139
|
+
if (format == "month_day") {
|
140
|
+
return `${toMonthNum(date)}/${toDay(date)}`
|
141
|
+
} else {
|
142
|
+
return `${date.toLocaleString(undefined, {month: "short"})} ${toDay(date)}`
|
89
143
|
}
|
90
144
|
}
|
145
|
+
|
146
|
+
export default {
|
147
|
+
toMinute,
|
148
|
+
toHour,
|
149
|
+
toDay,
|
150
|
+
toDayAbbr,
|
151
|
+
toWeekday,
|
152
|
+
toMonth,
|
153
|
+
toMonthNum,
|
154
|
+
toYear,
|
155
|
+
toTime,
|
156
|
+
toMeridiem,
|
157
|
+
toTimeZone,
|
158
|
+
toTimeWithMeridiem,
|
159
|
+
toIso,
|
160
|
+
fromNow,
|
161
|
+
toCustomFormat,
|
162
|
+
}
|