Merge pull request #19 from NoahMLoomis/add-date-format-prop

Added displayFormat prop to change the text display of the selected dates

Author: JefteCaro

README.md

@@ -23,6 +23,7 @@
 - ✅ Shortcuts
 - ✅ TypeScript support
 - ✅ Localization(i18n)
+- ✅ Date formatting
 - ⬜ Disable specific dates
 - ⬜ Custom shortcuts
 

src/components/Datepicker.tsx

@@ -46,6 +46,7 @@ interface Props {
     disabled?: boolean;
     inputClassName?: string | null;
     containerClassName?: string | null;
+    displayFormat?: string;
     readonly?: boolean;
 }
 
@@ -65,6 +66,7 @@ const Datepicker: React.FC<Props> = ({
     disabled = false,
     inputClassName = null,
     containerClassName = null,
+    displayFormat = "YYYY-MM-DD",
     readonly = false
 }) => {
     // Ref
@@ -216,7 +218,9 @@ const Datepicker: React.FC<Props> = ({
                     end: formatDate(endDate)
                 });
                 setInputText(
-                    `${formatDate(startDate)}${asSingle ? "" : ` ~ ${formatDate(endDate)}`}`
+                    `${formatDate(startDate, displayFormat)}${
+                        asSingle ? "" : ` ~ ${formatDate(endDate, displayFormat)}`
+                    }`
                 );
             }
         }
@@ -227,7 +231,7 @@ const Datepicker: React.FC<Props> = ({
                 end: null
             });
         }
-    }, [asSingle, value]);
+    }, [asSingle, value, displayFormat]);
 
     // Variable
     const colorPrimary = useMemo(() => {