X2BEE 솔루션에서 사용하는 숫자 및 날짜 변환 방법에 대한 가이드를 제공합니다. Front와 BO에서의 숫자 변환 지침과 날짜 변환 예제 및 예상 결과를 설명합니다.
...
숫자 변환 가이드
1. Front 숫자 변환 가이드 (common.js)
| 코드 블럭 |
|---|
|
.....
numberFormat: function (number) {
return new Intl.NumberFormat(this.$i18n.locale).format(number);
}
..... |
...
| 코드 블럭 |
|---|
|
numberFormat(24000000)
// 결과 : 24,000,000 |
| 코드 블럭 |
|---|
|
.....
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;
}
..... |
...
| 코드 블럭 |
|---|
|
fNumber(24000000)
// 결과 : 24,000,000 |
날짜 변환 가이드
1. Front 날짜 변환 가이드 (common.js)
dateFormat : 사용자가 직접 포맷을 지정하여 사용
dateFormatTypeHMS : YYYY-MM-DD HH:mm:ss 포맷 사용
dateFormatTypeHM : YYYY-MM-DD HH:mm 포맷 사용
dateFormatTypeH : YYYY-MM-DD HH 포맷 사용
dateFormatType : YYYY-MM-DD 포맷 사용
...
| 코드 블럭 |
|---|
|
dateFormat('2023-06-12T09:52:16', 'YYYY-MM-DD HH:mm:ss');
// 결과 : 2023-06-12 09:52:16
dateFormatTypeHM('2023-06-12T09:52:16');
// 결과 : 2023-06-12 09:52 |
2. BO 날짜 변환 가이드 (common-utils.ts)
| 코드 블럭 |
|---|
|
.....
/**
* 날짜 변환
* Format을 사용자 지정
*/
export const convertFormatDate = (value: ConfigType, formatValue: string) =>
dayjs(value).format(formatValue);
/**
* 날짜 변환 Type1
* Format 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);
..... |
...
| 정보 |
|---|
BO Locale MUI 내에서 제공되는 LocalizationProvider를 적용하고 @mui/x-date-pickers 컴포넌트를 사용합니다. 언어셋 변경 시, 변경된 언어셋에 해당하는 날짜 포맷으로 자동 변환됩니다. LocalizationProvider 적용 방법은 https://mui.com/x/react-date-pickers/adapters-locale/를 참고하시기 바랍니다.
|
3. 날짜 패턴 유형
아래의 표현을 참고하여 포맷에 넣어 사용하시면 됩니다.
...