X2BEE 솔루션에서 사용하는 숫자 및 날짜 변환 방법에 대한 가이드를 제공합니다. Front와 BO에서의 숫자 변환 지침과 날짜 변환 예제 및 예상 결과를 설명합니다.
...
숫자 변환 가이드
1.
...
코드 블럭 | ||
---|---|---|
| ||
.....
numberFormat: function (number) {
return new Intl.NumberFormat(this.$i18n.locale).format(number);
}
..... |
샘플
코드 블럭 | ||
---|---|---|
| ||
numberFormat(24000000)
// 결과 : 24,000,000 |
...
BO 숫자변환 가이드 ( format-number.ts )
코드 블럭 | ||
---|---|---|
| ||
..... 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; } ..... |
샘플
코드 블럭 | |
---|---|
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 )
코드 블럭 | ||
---|---|---|
| ||
..... 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) ..... |
샘플
코드 블럭 | ||
---|---|---|
| ||
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 내에서 제공되는 언어셋 변경 시, 변경된 언어셋에 해당되는 Date Format으로 자동 변환합니다.
|
2. BO 날짜
...
패턴 상수(common-
...
constants.ts)
코드 블럭 | ||||
---|---|---|---|---|
| .....
/**
* 날짜 변환
* Format을 사용자 지정
*/
export const convertFormatDate = (value: ConfigType, formatValue: string) =>
dayjs(value).format(formatValue);
/**
* 날짜 변환 Type1
* Format
| |||
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' } } |
샘플
코드 블럭 | ||
---|---|---|
| ||
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 내에서 제공되는
|
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 |