Date picker in dialog

tsawler · Feb 21, 2021 · e138d20 · e138d20
1 parent b2efef4
commit e138d20
Showing 1 changed file with 61 additions and 2 deletions.
diff --git a/working-html/reservation.html b/working-html/reservation.html
@@ -28,6 +28,10 @@
         .notie-container {
             box-shadow: none;
         }
+
+        .datepicker {
+            z-index: 10000;
+        }
     </style>
 </head>
 
@@ -159,8 +163,26 @@ <h1 class="mt-3">Search for Availability</h1>
     })();
 
     document.getElementById("colorButton").addEventListener("click", function () {
-        attention.error({
-            msg: 'Ooops...',
+        let html = `
+        <form id="check-availability-form" action="" method="post" novalidate class="needs-validation">
+            <div class="form-row">
+                <div class="col">
+                    <div class="form-row" id="reservation-dates-modal">
+                        <div class="col">
+                            <input disabled required class="form-control" type="text" name="start" id="start" placeholder="Arrival">
+                        </div>
+                        <div class="col">
+                            <input disabled required class="form-control" type="text" name="end" id="end" placeholder="Departure">
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </form>
+        `;
+        attention.custom({
+            title: 'Choose your dates',
+            msg: html,
         });
     })
 
@@ -243,10 +265,47 @@ <h1 class="mt-3">Search for Availability</h1>
 
         }
 
+        async function custom(c) {
+            const {
+                msg = "",
+                title = "",
+            } = c;
+
+            const { value: formValues } = await Swal.fire({
+                title: title,
+                html: msg,
+                backdrop: false,
+                focusConfirm: false,
+                showCancelButton: true,
+                willOpen: () => {
+                    const elem = document.getElementById("reservation-dates-modal");
+                    const rp = new DateRangePicker(elem, {
+                        format: 'yyyy-mm-dd',
+                        showOnFocus: true,
+                    })
+                },
+                didOpen: () => {
+                    document.getElementById("start").removeAttribute("disabled");
+                    document.getElementById("end").removeAttribute("disabled");
+                },
+                preConfirm: () => {
+                    return [
+                        document.getElementById('start').value,
+                        document.getElementById('end').value
+                    ]
+                }
+            })
+
+            if (formValues) {
+                Swal.fire(JSON.stringify(formValues))
+            }
+        }
+
         return {
             toast: toast,
             success: success,
             error: error,
+            custom: custom,
         }
     }