feat: className, disabled, placeholder 옵션 추가

Author: 신용준

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shinyongjun/react-datepicker",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "source": "./src/index.tsx",

package/src/components/Datepicker.tsx

@@ -21,6 +21,9 @@ interface IProps {
   labelFormat?: string;
   closesAfterChange?: boolean;
   weekdayLabels?: string[];
+  className?: string;
+  placeholder?: string;
+  disabled?: boolean;
   onChange?: (activeDate: Date | null) => void;
 }
 
@@ -32,6 +35,9 @@ function Datepicker({
   labelFormat = 'YYYY / MM',
   closesAfterChange = true,
   weekdayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+  className = '',
+  placeholder = '',
+  disabled = false,
   onChange,
 }: IProps) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
@@ -64,13 +70,15 @@ function Datepicker({
   }, [value, onChange, setViewDate]);
 
   return (
-    <div className={`${NAME_SPACE}__wrapper`}>
+    <div className={`${NAME_SPACE}__wrapper ${className}`}>
       <InputDate
         value={value}
-        setValue={setValue}
         valueFormat={valueFormat}
-        setIsVisible={setIsVisible}
         useClearButton={useClearButton}
+        placeholder={placeholder}
+        disabled={disabled}
+        setValue={setValue}
+        setIsVisible={setIsVisible}
       />
       {isVisible && (
         <div className={`${NAME_SPACE}__datepicker-container`} ref={container}>

package/src/components/Rangepicker.tsx

@@ -23,6 +23,9 @@ interface IProps {
   labelFormat?: string;
   closesAfterChange?: boolean;
   weekdayLabels?: string[];
+  className?: string;
+  placeholder?: string;
+  disabled?: boolean;
   onChange?: (startDate: Date | null, endDate: Date | null) => void;
 }
 
@@ -35,6 +38,9 @@ function Rangepicker({
   labelFormat = 'YYYY / MM',
   closesAfterChange = true,
   weekdayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+  className = '',
+  placeholder = '',
+  disabled = false,
   onChange,
 }: IProps) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
@@ -73,12 +79,14 @@ function Rangepicker({
   }, [startValue, endValue, onChange]);
 
   return (
-    <div className={`${NAME_SPACE}__wrapper`}>
+    <div className={`${NAME_SPACE}__wrapper ${className}`}>
       <InputRange
         startValue={startValue}
         endValue={endValue}
         valueFormat={valueFormat}
         useClearButton={useClearButton}
+        placeholder={placeholder}
+        disabled={disabled}
         setIsVisible={setIsVisible}
         setStartValue={setStartValue}
         setEndValue={setEndValue}

package/src/components/input/Date.tsx

@@ -8,6 +8,8 @@ interface IProps {
   value: Date | null;
   valueFormat: string;
   useClearButton: boolean;
+  placeholder: string;
+  disabled: boolean;
   setValue: (value: Date | null) => void;
   setIsVisible: (value: boolean) => void;
 }
@@ -16,6 +18,8 @@ function InputDate({
   value,
   valueFormat,
   useClearButton,
+  placeholder,
+  disabled,
   setValue,
   setIsVisible,
 }: IProps) {
@@ -30,6 +34,8 @@ function InputDate({
         type="text"
         value={formatDate(value, valueFormat)}
         readOnly
+        placeholder={placeholder}
+        disabled={disabled}
         onFocus={handleFocus}
       />
       {useClearButton && value && (

package/src/components/input/Range.tsx

@@ -9,6 +9,8 @@ interface IProps {
   endValue: Date | null;
   valueFormat: string;
   useClearButton: boolean;
+  placeholder: string;
+  disabled: boolean;
   setStartValue: (value: Date | null) => void;
   setEndValue: (value: Date | null) => void;
   setIsVisible: (value: boolean) => void;
@@ -19,6 +21,8 @@ function InputRange({
   endValue,
   valueFormat,
   useClearButton,
+  placeholder,
+  disabled,
   setStartValue,
   setEndValue,
   setIsVisible,
@@ -50,6 +54,8 @@ function InputRange({
         type="text"
         value={setRangeValue()}
         readOnly
+        placeholder={placeholder}
+        disabled={disabled}
         onFocus={handleFocus}
       />
       {useClearButton && (startValue || endValue) && (

test/src/App.tsx

@@ -39,6 +39,13 @@ function App() {
         initStartValue={new Date(2023, 7, 1)}
         initEndValue={new Date(2023, 8, 7)}
       />
+      <div style={{ marginTop: 100 }}>
+        <Datepicker className="test" />
+        <Datepicker placeholder="YYYY-MM-DD" />
+        <Rangepicker placeholder="YYYY-MM-DD - YYYY-MM-DD" />
+        <Datepicker disabled={true} />
+        <Rangepicker disabled={true} />
+      </div>
     </div>
   );
 }