From e138d204fce15202f22010665efae2017dd00547 Mon Sep 17 00:00:00 2001
From: Trevor Sawler <trevor.sawler@gmail.com>
Date: Sun, 21 Feb 2021 11:28:20 -0400
Subject: [PATCH] Date picker in dialog

---
 working-html/reservation.html | 63 +++++++++++++++++++++++++++++++++--
 1 file changed, 61 insertions(+), 2 deletions(-)

diff --git a/working-html/reservation.html b/working-html/reservation.html
index 71d2596..fade4f1 100644
--- 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,
         }
     }