ADCIO-3282) fix: fix date picker required issue (#45)

* fix: fix date picker required issue * fix: fix datepicker issue --------- Co-authored-by: dev-redo <[email protected]>
corca-ai · Apr 19, 2024 · 8067391 · 8067391
1 parent 4969339
commit 8067391
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/src/components/DatePicker/DateTime/index.tsx b/src/components/DatePicker/DateTime/index.tsx
@@ -35,6 +35,7 @@ export function DateTime({
         locale={LOCALE[language]}
         selected={newDate}
         onChange={date => setNewDate(date)}
+        required={inputProps?.required}
         customInput={
           <CustomInput
             {...inputProps}

diff --git a/src/components/DatePicker/SingleDate/index.tsx b/src/components/DatePicker/SingleDate/index.tsx
@@ -35,6 +35,7 @@ export function SingleDate({
         ref={datePickerRef}
         locale={LOCALE[language]}
         selected={selected}
+        required={inputProps?.required}
         onChange={date => {
           onChange(date!);
         }}

diff --git a/src/stories/DatePicker.stories.tsx b/src/stories/DatePicker.stories.tsx
@@ -106,6 +106,38 @@ export function DateTime() {
   );
 }
 
+export function InputStyle() {
+  const [singleDate, setSingleDate] = useState<Date | null>(null);
+  const [dateTime, setDateTime] = useState<Date | null>(null);
+
+  return (
+    <Container>
+      <DatePicker.Date
+        selected={singleDate}
+        onChange={setSingleDate}
+        language={'ko'}
+        inputProps={{
+          width: 400,
+          label: 'Single Date',
+          required: true,
+          description: '날짜만 입력할 수 있는 입력창 입니다.',
+        }}
+      />
+      <DatePicker.DateTime
+        selected={dateTime}
+        onChange={setDateTime}
+        language={'ko'}
+        inputProps={{
+          width: 400,
+          label: 'Date Time',
+          required: true,
+          description: '날짜와 시간을 모두 입력할 수 있는 입력창 입니다.',
+        }}
+      />
+    </Container>
+  );
+}
+
 const Container = styled.div`
   width: 100%;
   height: 100%;