버전 비교

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.

X2BEE 솔루션에서 사용하는 숫자 및 날짜 변환 방법에 대한 가이드를 제공합니다. Front와 BO에서의 숫자 변환 지침과 날짜 변환 예제 및 예상 결과를 설명합니다.

...

숫자 변환 가이드

1.

...

코드 블럭
languagejs
.....
numberFormat: function (number) {
  return new Intl.NumberFormat(this.$i18n.locale).format(number);
}
.....

샘플

코드 블럭
languagejs
numberFormat(24000000)
// 결과 : 24,000,000

...

BO 숫자변환 가이드 ( format-number.ts )

코드 블럭
languagejstypescript
.....
export function fNumber(inputValue: InputNumberValue, options?: Options) {
  const locale = formatNumberLocale() || DEFAULT_LOCALE;

  const number = processInput(inputValue);
  if (number === null) return '';

  const fm = new Intl.NumberFormat(locale.code, {
    minimumFractionDigits: 0,
    maximumFractionDigits: 2,
    ...options
  }).format(number);

  return fm;
}
.....

샘플

language
코드 블럭
js
fNumber(24000000)
//- 결과 : 24,000,000

날짜 변환 가이드

1.

...

BO 날짜변환 가이드 ( common-utils.

...

  • dateFormat : 사용자가 직접 포맷을 지정하여 사용

  • dateFormatTypeHMS : YYYY-MM-DD HH:mm:ss 포맷 사용

  • dateFormatTypeHM : YYYY-MM-DD HH:mm 포맷 사용

  • dateFormatTypeH : YYYY-MM-DD HH 포맷 사용

  • dateFormatType : YYYY-MM-DD 포맷 사용

ts )

코드 블럭
languagejstypescript
.....
dateFormat(date, format = 'YYYY-MM-DD HH:mm:ss') {
  return this.$dayjs(date).format(format);
},
dateFormatTypeHMS: function(date) {
  return this.$dayjs(date).format('/**
 * 날짜 변환
 * Format을 사용자 지정
 */
export const convertFormatDate = (value: ConfigType, formatValue: string) =>
  dayjs(value).format(formatValue)

/**
 * 날짜 변환 Type1
 * Format YYYY-MM-DD HH:mm:ss');
},
dateFormatTypeHM: function(date) {
  return this.$dayjs
 */
export const convertLocaleDateTime = (date: ConfigType) =>
  dayjs(date).format('YYYY-MM-DD HH:mm');
},
dateFormatTypeH: function(date) {
  return this.$dayjs(date).format('DATE_FORMAT.LOCAL_DATE_TIME)

/**
 * 날짜 변환 Type2
 * Format YYYY-MM-DD HH');
},
dateFormatType: function(date) {
  return this.$dayjs
 */
export const convertLocaleDate = (date: ConfigType) =>
  dayjs(date).format('YYYY-MM-DD');
}DATE_FORMAT.DEFAULT.DATE)
.....

샘플

코드 블럭
languagejstypescript
dateFormatconvertFormatDate('2023-06-12T09:52:16', 'YYYY-MM-DD HH:mm:ss');
//- 결과 : 2023-06-12 09:52:16
dateFormatTypeHMconvertLocaleDateTime('2023-06-12T09:52:16');
//- 결과 : 2023-06-12 09:52:16

정보

BO Locale

MUI 내에서 제공되는 LocalizationProvider 적용 및 @mui/x-date-pickers 컴포넌트를 사용합니다.

언어셋 변경 시, 변경된 언어셋에 해당되는 Date Format으로 자동 변환합니다.

LocalizationProvider 적용 방법은 https://mui.com/x/react-date-pickers/adapters-locale/ 를 참고 바랍니다.

2. BO 날짜

...

패턴 상수(common-

...

constants.ts)

..... /** * 날짜 변환 * Format을 사용자 지정 */ export const convertFormatDate = (value: ConfigType, formatValue: string) => dayjs(value).format(formatValue); /** * 날짜 변환 Type1 * Format
코드 블럭
languagejs
typescript
export const DATE_FORMAT = {
  DATE_TIME: 'DD MMM YYYY h:mm a',
  DATE: 'DD MMM YYYY',
  TIME: 'h:mm a',
  LOCAL_DATE_TIME: 'YYYY-MM-DDTHH:mm:ss',
  SPLIT: {
    DATE_TIME: 'DD/MM/YYYY h:mm a',
    DATE: 'DD/MM/YYYY'
  },
  DEFAULT: {
    DATE_TIME: 'YYYY-MM-DD HH:mm:ss',
 */ export const convertLocaleDateTime = (date: ConfigType) =>
  dayjs(date).format(DATE_FORMAT.LOCAL_DATE_TIME);
/**
 * 날짜 변환 Type2
 * Format YYYY-MM-DD
 */
export const convertLocaleDate = (date: ConfigType) =>
  dayjs(date).format(DATE_FORMAT.DEFAULT.DATE);
..... DATE_TIME_WITH_MINUTE: 'YYYY-MM-DD HH:mm',
    DATE: 'YYYY-MM-DD',
    DOT_DATE: 'YYYY.MM.DD',
    DATE_STRING: 'YYYYMMDD',
    MONTH: 'YYYY-MM'
  },
  PARAM_CASE: {
    DATE_TIME: 'DD-MM-YYYY h:mm a',
    DATE: 'DD-MM-YYYY'
  }
}

샘플

코드 블럭
languagejstypescript
convertFormatDate('2023-06-12T09:52:16', 'YYYY-MM-DD HH:mm'DATE_FORMAT.DEFAULT.DATE_TIME_WITH_MINUTE);
//- 결과 : 2023-06-12 09:52
convertLocaleDateTimeconvertFormatDate('2023-06-12T09:52:16', DATE_FORMAT.DEFAULT.DATE_TIME);
//- 결과 : 2023-06-12 09:52:16
정보

BO Locale

MUI 내에서 제공되는 LocalizationProvider를 적용하고 @mui/x-date-pickers 컴포넌트를 사용합니다. 언어셋 변경 시, 변경된 언어셋에 해당하는 날짜 포맷으로 자동 변환됩니다.

LocalizationProvider 적용 방법은 https://mui.com/x/react-date-pickers/adapters-locale/를 참고하시기 바랍니다.

3. 날짜 패턴 유형

아래의 표현을 참고하여 포맷에 넣어 사용하시면 됩니다.

...

기호

...

설명

...

YY

...

01 두 자리 연도

...

YYYY

...

2001 네 자리 연도

...

M

...

1-12 월, 1부터 시작

...

MM

...

01-12 월, 두 자리

...

MMM

...

Jan-Dec 약어 월 이름

...

MMMM

...

January-December 전체 월 이름

...

D

...

1-31 일

...

DD

...

01-31 일, 두 자리

...

H

...

0-23 시간

...

HH

...

00-23 시간, 두 자리

...

h

...

1-12 시간, 12시간제

...

hh

...

01-12 시간, 12시간제, 두 자리

...

m

...

0-59 분

...

mm

...

00-59 분, 두 자리

...

s

...

0-59 초

...

ss

...

00-59 초, 두 자리

...

S

...

0-9 백분의 밀리초, 한 자리

...

SS

...

00-99 십의 밀리초, 두 자리

...

SSS

...

000-999 밀리초, 세 자리

...

Z

...

-05:00 UTC 오프셋

...

ZZ

...

-0500 UTC 간결한 오프셋, 두 자리

...

A

...

AM PM 대문자

...

a

...

am pm 소문자

...

Do

...

1st... 31st 월의 일

...

X

...

1410715640.579 유닉스 타임스탬프

...

x

...

3. 날짜 패턴 유형

아래의 표현을 참고하여 format에 넣어 사용하시면 됩니다.

YY

01

Two-digit year

YYYY

2001

Four-digit year

M

1-12

Month, beginning at 1

MM

01-12

Month, 2-digits

MMM

Jan-Dec

The abbreviated month name

MMMM

January-December

The full month name

D

1-31

Day of month

DD

01-31

Day of month, 2-digits

H

0-23

Hours

HH

00-23

Hours, 2-digits

h

1-12

Hours, 12-hour clock

hh

01-12

Hours, 12-hour clock, 2-digits

m

0-59

Minutes

mm

00-59

Minutes, 2-digits

s

0-59

Seconds

ss

00-59

Seconds, 2-digits

S

0-9

Hundreds of milliseconds, 1-digit

SS

00-99

Tens of milliseconds, 2-digits

SSS

000-999

Milliseconds, 3-digits

Z

-05:00

Offset from UTC

ZZ

-0500

Compact offset from UTC, 2-digits

A

AM PM

Post or ante meridiem, upper-case

a

am pm

Post or ante meridiem, lower-case

Do

1st... 31st

Day of Month with ordinal

X

1410715640.579

Unix timestamp

x

1410715640579

Unix ms timestamp

YY

01

Two-digit year

YYYY

2001

Four-digit year

M

1-12

Month, beginning at 1

MM

01-12

Month, 2-digits

MMM

Jan-Dec

The abbreviated month name

MMMM

January-December

The full month name

D

1-31

Day of month

DD

01-31

Day of month, 2-digits

H

0-23

Hours

HH

00-23

Hours, 2-digits

h

1-12

Hours, 12-hour clock

hh

01-12

Hours, 12-hour clock, 2-digits

m

0-59

Minutes

mm

00-59

Minutes, 2-digits

s

0-59

Seconds

ss

00-59

Seconds, 2-digits

S

0-9

Hundreds of milliseconds, 1-digit

SS

00-99

Tens of milliseconds, 2-digits

SSS

000-999

Milliseconds, 3-digits

Z

-05:00

Offset from UTC

ZZ

-0500

Compact offset from UTC, 2-digits

A

AM PM

Post or ante meridiem, upper-case

a

am pm

Post or ante meridiem, lower-case

Do

1st... 31st

Day of Month with ordinal

X

1410715640.579

Unix timestamp

x

1410715640579

Unix ms timestamp