Restricting dates in the html5 datepicker for off canvas book now menu

diff --git a/js/app.js b/js/app.js
index f7c2afc..36d9857 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -22,6 +22,7 @@ $(document).ready(function () {
         d,
         m,
         y,
+        currentDate,
         page;
     $('ul.children').each(function () {
         $(this).before('<a class="toggle" href="#"></a>');
@@ -66,20 +67,21 @@ $(document).ready(function () {
     $("#cal2").click(function () {
         $("#date2").datepicker("show");
     });
-   /* $("#offCal1").click(function () {
-        $("#dateOff1").datepicker("show");
-    });
-    $("#offCal2").click(function () {
-        $("#dateOff2").datepicker("show");
-    });*/
-   /* today = new Date();
+  
+    // restrict datepicker for days after current date and 2 days after that date [min]
+    today = new Date();
     minDays = 2;
     today.setDate(today.getDate() + minDays);
     d = today.getDate();
     m = today.getMonth() + 1;
     y = today.getFullYear();
-    requiredDate = m + '/' + d + '/' + y; 
-    $("#date1").val(requiredDate); */
+    requiredDate = y + '/' + m + '/' + d;
+    $("#dateOff1").attr("min", requiredDate);
+    
+    $("#dateOff1").change(function () {
+        currentDate = this.value;
+    });
+   // $("#date1").val(requiredDate);
     $("#date1").datepicker({
         minDate: 2,
         onSelect: function (date) {
@@ -90,11 +92,13 @@ $(document).ready(function () {
             arrival = $("#date1").val();
         }
     });
-   /* d = today.getDate() + 2;
+    // restrict for min of 2 days after selected days [max]
+    d = today.getDate() + 2;
     m = today.getMonth() + 1;
     y = today.getFullYear();
-    requiredDate = m + '/' + d + '/' + y; 
-    $("#date2").val(requiredDate); */
+    requiredDate = y + '/' + m + '/' + d;
+    
+    //$("#date2").val(requiredDate);
     $("#date2").datepicker({
         onSelect: function (date) {
             departure = $("#date2").val();
@@ -103,26 +107,8 @@ $(document).ready(function () {
     // off canvas menu values /////////////////////////
     $('#offGuests').blur(function () {
         guests = $('#offGuests').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();
-        
-        }
-    });
-    $("#dateOff2").datepicker({
-        onSelect: function (date) {
-            departure = $("#dateOff2").val();
-          
-        }
-    }); */
-
+  
 
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index f599b62..a653a2c 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -13,6 +13,7 @@ $(document).ready(function () {
         d,
         m,
         y,
+        currentDate,
         page;
     $('ul.children').each(function () {
         $(this).before('<a class="toggle" href="#"></a>');
@@ -57,20 +58,21 @@ $(document).ready(function () {
     $("#cal2").click(function () {
         $("#date2").datepicker("show");
     });
-   /* $("#offCal1").click(function () {
-        $("#dateOff1").datepicker("show");
-    });
-    $("#offCal2").click(function () {
-        $("#dateOff2").datepicker("show");
-    });*/
-   /* today = new Date();
+  
+    // restrict datepicker for days after current date and 2 days after that date [min]
+    today = new Date();
     minDays = 2;
     today.setDate(today.getDate() + minDays);
     d = today.getDate();
     m = today.getMonth() + 1;
     y = today.getFullYear();
-    requiredDate = m + '/' + d + '/' + y; 
-    $("#date1").val(requiredDate); */
+    requiredDate = y + '/' + m + '/' + d;
+    $("#dateOff1").attr("min", requiredDate);
+    
+    $("#dateOff1").change(function () {
+        currentDate = this.value;
+    });
+   // $("#date1").val(requiredDate);
     $("#date1").datepicker({
         minDate: 2,
         onSelect: function (date) {
@@ -81,11 +83,13 @@ $(document).ready(function () {
             arrival = $("#date1").val();
         }
     });
-   /* d = today.getDate() + 2;
+    // restrict for min of 2 days after selected days [max]
+    d = today.getDate() + 2;
     m = today.getMonth() + 1;
     y = today.getFullYear();
-    requiredDate = m + '/' + d + '/' + y; 
-    $("#date2").val(requiredDate); */
+    requiredDate = y + '/' + m + '/' + d;
+    
+    //$("#date2").val(requiredDate);
     $("#date2").datepicker({
         onSelect: function (date) {
             departure = $("#date2").val();
@@ -94,26 +98,8 @@ $(document).ready(function () {
     // off canvas menu values /////////////////////////
     $('#offGuests').blur(function () {
         guests = $('#offGuests').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();
-        
-        }
-    });
-    $("#dateOff2").datepicker({
-        onSelect: function (date) {
-            departure = $("#dateOff2").val();
-          
-        }
-    }); */
-
+  
 
 });

diff --git a/parts/off-canvas-menu.php b/parts/off-canvas-menu.php
index cdc0a2c..f7a5bcb 100644 (file)
--- a/parts/off-canvas-menu.php
+++ b/parts/off-canvas-menu.php
@@ -26,7 +26,7 @@
                 <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" placeholder="Depart" name="DepartureDate" required="required"><img id ="offCal2" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
+                <input id="dateOff2" type="date" min="<?php date("Y/m/d", strtotime("+2 days")); ?>" 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" > -->