changed off canvas res form from html5 date to datepicker

diff --git a/js/app.js b/js/app.js
index f9f3f47..0cf1c58 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -66,10 +66,16 @@ $(document).ready(function () {
     $("#cal2").click(function () {
         $("#date2").datepicker("show");
     });
+    $("#offCal1").click(function () {
+        $("#dateOff1").datepicker("show");
+    });
+    $("#offCal2").click(function () {
+        $("#dateOff2").datepicker("show");
+    });
     $("#dateOff1").val("Arrive");
     $("#dateOff2").val("Depart");
     // restrict arrival date //////////////////////////////////////////////
-    $(document).on('change', '#dateOff1', function () {
+  /* $(document).on('change', '#dateOff1', function () {
         currentDate = $("#dateOff1").val();
         currentDate = new Date(currentDate);
         currentDate = new Date(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), currentDate.getUTCDate());
@@ -103,9 +109,9 @@ $(document).ready(function () {
         $("#dateOff2").val(requiredDate);
         }
         
-    });
+    });*/
     // restrict departure date ///////////////////////////////
-    $(document).on('change', '#dateOff2', function () {
+   /* $(document).on('change', '#dateOff2', function () {
         currentDate = $("#dateOff1").val();
         currentDate = new Date(currentDate);
         currentDate = new Date(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), currentDate.getUTCDate());
@@ -123,7 +129,7 @@ $(document).ready(function () {
         if ($("#dateOff2").val() < $('#dateOff2').attr("min")) {
            // $("#dateOff2").val(requiredDate);
         }
-    });
+    });*/
     $("#date1").datepicker({
         minDate: 2,
         onSelect: function (date) {
@@ -134,10 +140,23 @@ $(document).ready(function () {
             arrival = $("#date1").val();
         }
     });
+    $("#dateOff1").datepicker({
+        minDate: 2,
+        onSelect: function (date) {
+            $("#dateOff1").datepicker({dateFormat: 'yy-mm-dd'}).val();
+            nights = $("#dateOff1").datepicker('getDate');
+            nights.setDate(nights.getDate() + 2);
+            $("#dateOff2").datepicker("option", {minDate: new Date(nights)});
+            arrival = $("#dateOff1").val();
+        }
+    });
     //$("#date2").val(requiredDate);
     $("#date2").datepicker({
         onSelect: function (date) {
         }
+    });
+    $("#dateOff2").datepicker({ 
+    
     });
     // off canvas menu values /////////////////////////
     $('#offGuests').blur(function () {

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 59365c7..99820e0 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -57,10 +57,16 @@ $(document).ready(function () {
     $("#cal2").click(function () {
         $("#date2").datepicker("show");
     });
+    $("#offCal1").click(function () {
+        $("#dateOff1").datepicker("show");
+    });
+    $("#offCal2").click(function () {
+        $("#dateOff2").datepicker("show");
+    });
     $("#dateOff1").val("Arrive");
     $("#dateOff2").val("Depart");
     // restrict arrival date //////////////////////////////////////////////
-    $(document).on('change', '#dateOff1', function () {
+  /* $(document).on('change', '#dateOff1', function () {
         currentDate = $("#dateOff1").val();
         currentDate = new Date(currentDate);
         currentDate = new Date(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), currentDate.getUTCDate());
@@ -94,9 +100,9 @@ $(document).ready(function () {
         $("#dateOff2").val(requiredDate);
         }
         
-    });
+    });*/
     // restrict departure date ///////////////////////////////
-    $(document).on('change', '#dateOff2', function () {
+   /* $(document).on('change', '#dateOff2', function () {
         currentDate = $("#dateOff1").val();
         currentDate = new Date(currentDate);
         currentDate = new Date(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), currentDate.getUTCDate());
@@ -114,7 +120,7 @@ $(document).ready(function () {
         if ($("#dateOff2").val() < $('#dateOff2').attr("min")) {
            // $("#dateOff2").val(requiredDate);
         }
-    });
+    });*/
     $("#date1").datepicker({
         minDate: 2,
         onSelect: function (date) {
@@ -125,10 +131,23 @@ $(document).ready(function () {
             arrival = $("#date1").val();
         }
     });
+    $("#dateOff1").datepicker({
+        minDate: 2,
+        onSelect: function (date) {
+            $("#dateOff1").datepicker({dateFormat: 'yy-mm-dd'}).val();
+            nights = $("#dateOff1").datepicker('getDate');
+            nights.setDate(nights.getDate() + 2);
+            $("#dateOff2").datepicker("option", {minDate: new Date(nights)});
+            arrival = $("#dateOff1").val();
+        }
+    });
     //$("#date2").val(requiredDate);
     $("#date2").datepicker({
         onSelect: function (date) {
         }
+    });
+    $("#dateOff2").datepicker({ 
+    
     });
     // off canvas menu values /////////////////////////
     $('#offGuests').blur(function () {

diff --git a/parts/off-canvas-menu.php b/parts/off-canvas-menu.php
index 975dbcd..dc410c2 100644 (file)
--- a/parts/off-canvas-menu.php
+++ b/parts/off-canvas-menu.php
@@ -24,11 +24,11 @@
                 <input type="text" placeholder="Search by property" name="s">
             </div>
             <div class="small-6 res-date columns">
-                <input id="dateOff1" type="date" min="<?php echo $requiredDate ?>" placeholder="Arrive" name="ArrivalDate" required="required">
+                <input id="dateOff1" type="text" min="<?php echo $requiredDate ?>" placeholder="Arrive" name="ArrivalDate" required="required">
                 <img id = "offCal1" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
             </div>
             <div class="small-6 res-date columns">
-                <input id="dateOff2" type="date" min="<?php echo $minStay ?>" placeholder="Depart" name="DepartureDate" required="required"><img id ="offCal2" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
+                <input id="dateOff2" type="text" min="<?php echo $minStay ?>" placeholder="Depart" name="DepartureDate" required="required"><img id ="offCal2" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
             </div>
             <div class="small-6 guest columns">
                 <!--<input id="offGuests" type="text" placeholder="Guests" > -->