Skip to content

Commit f431e6c

Browse files
RylanBotRylanBot
committed
chore: implement meridiemToHours utility
1 parent 46f0415 commit f431e6c

File tree

7 files changed

+50
-46
lines changed

7 files changed

+50
-46
lines changed

‎packages/components/date-picker/DatePicker.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import SelectInput from '../select-input';
1515
import { datePickerDefaultProps } from './defaultProps';
1616
import useSingle from './hooks/useSingle';
1717
import SinglePanel from './panel/SinglePanel';
18+
import { meridiemToHours } from './utils';
1819

1920
import type { StyledProps } from '../common';
2021
import type { TagInputRemoveContext } from '../tag-input';
@@ -207,10 +208,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
207208

208209
const { hours, minutes, seconds, milliseconds, meridiem } = extractTimeObj(val);
209210

210-
// am pm 12小时制转化 24小时制
211-
let nextHours = hours;
212-
if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
213-
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
211+
const nextHours = meridiemToHours(meridiem, hours);
214212
const currentDate = !dayjs(inputValue, format).isValid() ? dayjs() : dayjs(inputValue, format);
215213
const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
216214
const formattedDate = formatDate(nextDate, { format });

‎packages/components/date-picker/DatePickerPanel.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import React, { forwardRef } from 'react';
22
import dayjs from 'dayjs';
3+
34
import { formatDate, getDefaultFormat, parseToDayjs } from '@tdesign/common-js/date-picker/format';
4-
import { subtractMonth, addMonth, extractTimeObj } from '@tdesign/common-js/date-picker/utils';
5-
import { StyledProps } from '../common';
6-
import {
7-
TdDatePickerPanelProps,
8-
DateValue,
9-
DatePickerYearChangeTrigger,
5+
import { addMonth, extractTimeObj, subtractMonth } from '@tdesign/common-js/date-picker/utils';
6+
7+
import useDefaultProps from '../hooks/useDefaultProps';
8+
import useSingleValue from './hooks/useSingleValue';
9+
import SinglePanel from './panel/SinglePanel';
10+
import { meridiemToHours } from './utils';
11+
12+
import type { StyledProps } from '../common';
13+
import type {
1014
DatePickerMonthChangeTrigger,
15+
DatePickerYearChangeTrigger,
16+
DateValue,
1117
PresetDate,
18+
TdDatePickerPanelProps,
1219
} from './type';
13-
import SinglePanel from './panel/SinglePanel';
14-
import useSingleValue from './hooks/useSingleValue';
15-
import useDefaultProps from '../hooks/useDefaultProps';
1620

1721
export interface DatePickerPanelProps extends TdDatePickerPanelProps, StyledProps {}
1822

@@ -108,10 +112,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((origin
108112
setTime(val);
109113

110114
const { hours, minutes, seconds, milliseconds, meridiem } = extractTimeObj(val);
111-
// am pm 12小时制转化 24小时制
112-
let nextHours = hours;
113-
if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
114-
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
115+
const nextHours = meridiemToHours(meridiem, hours);
115116
const currentDate = !dayjs(cacheValue, format).isValid() ? dayjs() : dayjs(cacheValue, format);
116117
const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
117118
setCacheValue(formatDate(nextDate, { format }));

‎packages/components/date-picker/DateRangePicker.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { RangeInputPopup } from '../range-input';
2020
import { dateRangePickerDefaultProps } from './defaultProps';
2121
import useRange from './hooks/useRange';
2222
import RangePanel from './panel/RangePanel';
23-
import { dateCorrection } from './utils';
23+
import { dateCorrection, meridiemToHours } from './utils';
2424

2525
import type { StyledProps } from '../common';
2626
import type { DateRangeValue, PresetDate, TdDateRangePickerProps } from './type';
@@ -227,11 +227,8 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
227227
const currentDate = !dayjs(changedInputValue, format).isValid()
228228
? dayjs().year(year[activeIndex]).month(month[activeIndex])
229229
: dayjs(changedInputValue, format);
230-
// am pm 12小时制转化 24小时制
231-
let nextHours = hours;
232-
if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
233-
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
234230

231+
const nextHours = meridiemToHours(meridiem, hours);
235232
const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
236233
nextInputValue[activeIndex] = nextDate;
237234

‎packages/components/date-picker/DateRangePickerPanel.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1-
import React, { forwardRef, useState, useMemo } from 'react';
1+
import React, { forwardRef, useMemo, useState } from 'react';
22
import dayjs from 'dayjs';
3+
34
import { formatDate, getDefaultFormat, parseToDayjs } from '@tdesign/common-js/date-picker/format';
4-
import { subtractMonth, addMonth, extractTimeObj } from '@tdesign/common-js/date-picker/utils';
5+
import { addMonth, extractTimeObj, subtractMonth } from '@tdesign/common-js/date-picker/utils';
56
import log from '@tdesign/common-js/log/index';
6-
import { StyledProps } from '../common';
7+
8+
import useDefaultProps from '../hooks/useDefaultProps';
9+
import useRangeValue from './hooks/useRangeValue';
10+
import RangePanel from './panel/RangePanel';
11+
import { dateCorrection, meridiemToHours } from './utils';
12+
13+
import type { StyledProps } from '../common';
714
import {
8-
TdDateRangePickerPanelProps,
9-
DatePickerYearChangeTrigger,
1015
DatePickerMonthChangeTrigger,
1116
DatePickerTimeChangeTrigger,
17+
DatePickerYearChangeTrigger,
1218
PresetDate,
19+
TdDateRangePickerPanelProps,
1320
} from './type';
14-
import RangePanel from './panel/RangePanel';
15-
import useRangeValue from './hooks/useRangeValue';
16-
import useDefaultProps from '../hooks/useDefaultProps';
17-
import { dateCorrection } from './utils';
1821

1922
export interface DateRangePickerPanelProps extends TdDateRangePickerPanelProps, StyledProps {}
2023

@@ -173,11 +176,8 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
173176
const currentDate = !dayjs(changedInputValue, format).isValid()
174177
? dayjs().year(year[activeIndex]).month(month[activeIndex])
175178
: dayjs(changedInputValue, format);
176-
// am pm 12小时制转化 24小时制
177-
let nextHours = hours;
178-
if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
179-
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
180179

180+
const nextHours = meridiemToHours(meridiem, hours);
181181
const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
182182
nextInputValue[activeIndex] = nextDate;
183183

‎packages/components/date-picker/DayjsProvider.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import dayjs from 'dayjs';
2-
import React, { useLayoutEffect } from 'react';
2+
import React, { useEffect } from 'react';
33
import { useLocaleReceiver } from '../locale/LocalReceiver';
44

55
export interface DayjsProviderProps {
@@ -10,8 +10,10 @@ export default function DayjsProvider(props: DayjsProviderProps) {
1010
const [locale] = useLocaleReceiver('datePicker');
1111
const { dayjsLocale } = locale;
1212

13-
useLayoutEffect(() => {
14-
if (dayjsLocale) {
13+
dayjs.locale(dayjsLocale);
14+
15+
useEffect(() => {
16+
if (dayjsLocale !== dayjs.locale()) {
1517
dayjs.locale(dayjsLocale);
1618
}
1719
}, [dayjsLocale]);

‎packages/components/date-picker/base/Cell.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import classNames from 'classnames';
33
import { extractTimeObj } from '@tdesign/common-js/date-picker/utils';
44
import useConfig from '../../hooks/useConfig';
5+
import { meridiemToHours } from '../utils';
56

67
export interface DatePickerCellProps {
78
time?: string;
@@ -47,10 +48,7 @@ const DatePickerCell = (props: DatePickerCellProps) => {
4748
if (props.disabled) return;
4849
if (props.time) {
4950
const { hours, minutes, seconds, milliseconds, meridiem } = extractTimeObj(props.time);
50-
// am pm 12小时制转化 24小时制
51-
let nextHours = hours;
52-
if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
53-
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
51+
const nextHours = meridiemToHours(meridiem, hours);
5452
props.value.setHours(nextHours);
5553
props.value.setMinutes(minutes);
5654
props.value.setSeconds(seconds);
@@ -63,10 +61,7 @@ const DatePickerCell = (props: DatePickerCellProps) => {
6361
if (props.disabled) return;
6462
if (props.time) {
6563
const { hours, minutes, seconds, milliseconds, meridiem } = extractTimeObj(props.time);
66-
// am pm 12小时制转化 24小时制
67-
let nextHours = hours;
68-
if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
69-
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
64+
const nextHours = meridiemToHours(meridiem, hours);
7065
props.value.setHours(nextHours);
7166
props.value.setMinutes(minutes);
7267
props.value.setSeconds(seconds);

‎packages/components/date-picker/utils.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,14 @@ export function parseToDateTime(
6363

6464
return dayjs.toDate();
6565
}
66+
67+
/**
68+
* AM/PM 12小时制转 24小时制
69+
*/
70+
export function meridiemToHours(meridiem: string, hours: number) {
71+
let nextHours = hours;
72+
console.log('hours', hours);
73+
if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12;
74+
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
75+
return nextHours;
76+
}

0 commit comments

Comments
 (0)