Skip to content

Commit a3e63e9

Browse files
author
신용준
committed
v1.3.0
1 parent 9ba7e15 commit a3e63e9

File tree

7 files changed

+72
-22
lines changed

7 files changed

+72
-22
lines changed

‎package/CHANGE.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
## 1.3.0
2+
3+
### What's New?
4+
5+
- New Props - valueFormat
6+
- New Props - labelFormat
7+
18
## 1.2.0
29

310
### What's New?

‎package/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@shinyongjun/react-datepicker",
3-
"version": "1.2.0",
3+
"version": "1.3.0",
44
"main": "./dist/cjs/index.js",
55
"module": "./dist/esm/index.js",
66
"source": "./src/index.tsx",

‎package/src/components/Container.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import '../../assets/ReactDatepicker.css';
44
import * as React from 'react';
55
import { useState, useMemo, useRef, useEffect } from 'react';
6-
import { getFormatDatetime } from '../utils/datetime';
6+
import { devFormatDate, formatDate } from '../utils/datetime';
77
import {
88
setCenturyPage,
99
setDecadePage,
@@ -22,19 +22,23 @@ import useOutsideClick from '../hooks/useOutsideClick';
2222
interface Iprops {
2323
initValue?: Date | null;
2424
isClearButton?: boolean;
25+
valueFormat?: string;
26+
labelFormat?: string;
2527
onChange?: (activeDate: Date | null) => void;
2628
}
2729

2830
function Container({
2931
initValue = null,
3032
isClearButton = false,
33+
valueFormat = 'YYYY-MM-DD',
34+
labelFormat = 'YYYY / MM',
3135
onChange,
3236
}: Iprops) {
3337
// 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
3438
const NEW_DATE = new Date();
3539
const [value, setValue] = useState<Date | null>(initValue);
3640
const [viewDate, setViewDate] = useState<string>(
37-
getFormatDatetime(value || NEW_DATE, 'YYYY-MM-DD')
41+
formatDate(value || NEW_DATE, 'YYYY-MM-DD')
3842
);
3943
const [viewType, setViewType] = useState<
4044
'century' | 'decade' | 'year' | 'month'
@@ -91,7 +95,7 @@ function Container({
9195

9296
useEffect(() => {
9397
setIsVisible(false);
94-
setViewDate(getFormatDatetime(value || NEW_DATE, 'YYYY-MM-DD'));
98+
setViewDate(formatDate(value || NEW_DATE, 'YYYY-MM-DD'));
9599
if (onChange) {
96100
onChange(value);
97101
}
@@ -104,7 +108,7 @@ function Container({
104108
<input
105109
className={`${NAME_SPACE}__input`}
106110
type="text"
107-
value={getFormatDatetime(value, 'YYYY-MM-DD')}
111+
value={formatDate(value, valueFormat)}
108112
readOnly
109113
onFocus={handleFocus}
110114
/>
@@ -123,12 +127,14 @@ function Container({
123127
viewType={viewType}
124128
setViewType={setViewType}
125129
viewDate={viewDate}
130+
labelFormat={labelFormat}
126131
setViewDateByType={setViewDateByType}
127132
/>
128133
<div className={`${NAME_SPACE}__datepicker`}>
129134
{viewType === 'month' && (
130135
<ViewMonth
131136
value={value}
137+
valueFormat={valueFormat}
132138
monthPage={monthPage}
133139
setValue={setValue}
134140
/>

‎package/src/components/Controller.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@ import {
1010
setYearPage,
1111
} from '../utils/page';
1212
import { addLeadingZero } from '../utils/string';
13+
import { formatLabel } from '../utils/datetime';
1314

1415
type TviewType = 'century' | 'decade' | 'year' | 'month';
1516

1617
interface IProps {
1718
viewType: TviewType;
1819
setViewType: (value: TviewType) => void;
1920
viewDate: string;
21+
labelFormat: string;
2022
setViewDateByType: (
2123
value: string | number,
2224
type: 'year' | 'month' | 'date'
@@ -26,6 +28,7 @@ interface IProps {
2628
function Controller({
2729
viewDate,
2830
viewType,
31+
labelFormat,
2932
setViewType,
3033
setViewDateByType,
3134
}: IProps) {
@@ -54,7 +57,7 @@ function Controller({
5457
const year = Math.ceil(monthPage / 12);
5558
const month = addLeadingZero(monthPage % 12 || 12);
5659

57-
return `${year}-${month}`;
60+
return formatLabel(`${year}-${month}`, labelFormat);
5861
}
5962
return '';
6063
};

‎package/src/components/view/Month.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,32 @@
22

33
import * as React from 'react';
44
import { NAME_SPACE } from '../constants/core';
5-
import { getFormatDatetime } from '../../utils/datetime';
5+
import { formatDate } from '../../utils/datetime';
66

77
interface Iprops {
88
value: Date | null;
9+
valueFormat: string;
910
monthPage: number;
1011
setValue: (value: Date) => void;
1112
}
1213

13-
function ViewMonth({ monthPage, value, setValue }: Iprops) {
14+
function ViewMonth({ value, valueFormat, monthPage, setValue }: Iprops) {
1415
const year = Math.ceil(monthPage / 12);
1516
const month = monthPage % 12 || 12;
1617
const firstDay = new Date(year, month - 1, 1).getDay(); // 이달 1일의 요일
1718
const lastDateValue = new Date(year, month, 0); // 이달 말 일의 Date 객체
1819
const lastDate = lastDateValue.getDate(); // 이달 말 일
1920
const lastDay = lastDateValue.getDay(); // 이달 말 일의 요일
2021
const prevLastDate = new Date(year, month - 1, 0).getDate(); // 이전달의 말 일
21-
const formatedValue = getFormatDatetime(value, 'YYYY-MM-DD');
22+
const formatedValue = formatDate(value, valueFormat);
2223

2324
const renderDateButton = (
2425
date: number,
2526
thisValue: Date,
2627
classNameModifier = ''
2728
) => {
2829
const day = thisValue.getDay();
29-
const formatedThisValue = getFormatDatetime(thisValue, 'YYYY-MM-DD');
30+
const formatedThisValue = formatDate(thisValue, valueFormat);
3031

3132
return (
3233
<button

‎package/src/utils/datetime.ts‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,37 @@ export const toLocalISOString = (date: Date): string => {
1010
return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}`;
1111
};
1212

13-
export const getFormatDatetime = (datetime: Date | null, format: string) => {
14-
if (!datetime) return '';
15-
const origin = toLocalISOString(datetime).split('T')[0] as string;
13+
export const formatDate = (dateObj: Date | null, format: string) => {
14+
if (!dateObj) return '';
15+
const dateStr = toLocalISOString(dateObj).split('T')[0] as string;
1616

17-
const year = origin.split('-')[0];
18-
const month = origin.split('-')[1];
19-
const date = origin.split('-')[2];
17+
const year = dateStr.split('-')[0];
18+
const month = dateStr.split('-')[1];
19+
const date = dateStr.split('-')[2];
2020

21-
const result = format
22-
.replace(/YYYY/g, String(year))
23-
.replace(/MM/g, String(month))
24-
.replace(/DD/g, String(date));
21+
if (
22+
/.*YYYY.*/.test(format) &&
23+
/.*MM.*/.test(format) &&
24+
/.*DD.*/.test(format)
25+
) {
26+
return format
27+
.replace(/YYYY/g, String(year))
28+
.replace(/MM/g, String(month))
29+
.replace(/DD/g, String(date));
30+
}
31+
32+
return dateStr;
33+
};
34+
35+
export const formatLabel = (label: string, format: string) => {
36+
const year = label.split('-')[0];
37+
const month = label.split('-')[1];
2538

26-
return result;
39+
if (/.*YYYY.*/.test(format) && /.*MM.*/.test(format)) {
40+
return format.replace(/YYYY/g, String(year)).replace(/MM/g, String(month));
41+
}
42+
43+
return label;
2744
};
2845

2946
export const getMonthArray = (year: number, month: number) => {
@@ -32,7 +49,7 @@ export const getMonthArray = (year: number, month: number) => {
3249

3350
for (let day = 1; day <= daysInMonth; day++) {
3451
const date = new Date(year, month - 1, day, 12, 0, 0);
35-
const formattedDate = getFormatDatetime(date, 'YYYY-MM-DD');
52+
const formattedDate = formatDate(date, 'YYYY-MM-DD');
3653
const dayValue = date.getDate();
3754
const dayOfWeek = date.getDay();
3855

@@ -45,3 +62,17 @@ export const getMonthArray = (year: number, month: number) => {
4562

4663
return monthArray;
4764
};
65+
66+
// export const get;
67+
68+
/**
69+
* most pupolar date format
70+
* YYYY-MM-DD - 국제 표준
71+
* DD/MM/YYYY
72+
* DD-MM-YYYY
73+
* MM/DD/YYYY
74+
* MM-DD-YYYY
75+
* YYYY년 MM월 DD일 (한국 스타일)
76+
* DD Month YYYY (영국 스타일) - 04 September 2023
77+
* Month DD, YYYY (미국 스타일) - September 04, 2023
78+
*/

‎test/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ function App() {
1515
/>
1616
<Datepicker />
1717
<Datepicker isClearButton />
18+
<Datepicker valueFormat="MM/DD/YYYY" />
19+
<Datepicker labelFormat="YYYY년 MM월" />
1820
</div>
1921
);
2022
}

0 commit comments

Comments
 (0)