[Fix 🐛] The placeholder does not match the displayFormat props .

Author: onesine

src/components/Datepicker.tsx

@@ -264,27 +264,29 @@ const Datepicker: React.FC<Props> = ({
             disabled,
             inputClassName,
             containerClassName,
-            readOnly
+            readOnly,
+            displayFormat
         };
     }, [
         asSingle,
         colorPrimary,
         configs,
-        dayHover,
-        firstGotoDate,
         hideDatepicker,
-        i18n,
+        period,
+        dayHover,
         inputText,
         onChange,
-        period,
+        showFooter,
         placeholder,
         separator,
-        showFooter,
+        i18n,
         value,
         disabled,
         inputClassName,
         containerClassName,
-        readOnly
+        readOnly,
+        displayFormat,
+        firstGotoDate
     ]);
 
     return (

src/components/Input.tsx

@@ -25,7 +25,8 @@ const Input: React.FC = () => {
         separator,
         disabled,
         inputClassName,
-        readOnly
+        readOnly,
+        displayFormat
     } = useContext(DatepickerContext);
 
     // UseRefs
@@ -173,7 +174,7 @@ const Input: React.FC = () => {
                 placeholder={
                     placeholder
                         ? placeholder
-                        : `YYYY-MM-DD${asSingle ? "" : ` ${separator} YYYY-MM-DD`}`
+                        : `${displayFormat}${asSingle ? "" : ` ${separator} ${displayFormat}`}`
                 }
                 value={inputText}
                 onChange={handleInputChange}

src/contexts/DatepickerContext.ts

@@ -32,6 +32,7 @@ interface DatepickerStore {
     inputClassName?: string | null;
     containerClassName?: string | null;
     readOnly?: boolean;
+    displayFormat?: string;
 }
 
 const DatepickerContext = createContext<DatepickerStore>({
@@ -59,7 +60,8 @@ const DatepickerContext = createContext<DatepickerStore>({
     disabled: false,
     inputClassName: "",
     containerClassName: "",
-    readOnly: false
+    readOnly: false,
+    displayFormat: "YYYY-MM-DD"
 });
 
 export default DatepickerContext;