patch input date

resources/css/app.css

@@ -253,6 +253,10 @@
     @apply ml-2.5 mb-2 text-lg font-semibold text-gray-800 dark:text-gray-100;
 }
 
+.react-datepicker__aria-live {
+    @apply hidden
+}
+
 .min-h-100 {
     max-height: 45rem;
 }

resources/js/Components/FormInputDate.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import DatePicker from "react-datepicker";
+import { converToDate, dateToString } from "@/utils";
 
 export default function FormInputDate({ selected, onChange, label = '', error }) {
     return (
@@ -8,8 +9,8 @@ export default function FormInputDate({ selected, onChange, label = '', error })
                 <label htmlFor="first_name" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{label}</label>
             )}
             <DatePicker
-                selected={selected}
-                onChange={onChange}
+                selected={converToDate(selected)}
+                onChange={date => onChange(dateToString(date))}
                 closeOnScroll={true}
                 shouldCloseOnSelect={true}
                 dateFormat="dd/MM/yyyy"

resources/js/utils.js

@@ -1,4 +1,5 @@
 import moment from "moment";
+import { isEmpty } from "lodash";
 
 export const formatDate = (date) => {
     return moment(date).format("DD/MM/yyyy");
@@ -8,6 +9,18 @@ export const formatDateTime = (date) => {
     return moment(date).format("DD/MM/yyyy HH:mm:ss");
 };
 
+export const dateToString = (date) => {
+    return moment(date).format("MM/DD/yyyy");
+};
+
+export const converToDate = (date) => {
+    if (isEmpty(date) == false) {
+        return new Date(date);
+    }
+
+    return "";
+};
+
 export function formatIDR(amount) {
     const idFormatter = new Intl.NumberFormat("id-ID",{
         minimumFractionDigits: 0,