Home > Blockchain >  Reservation/booking Form Using jQuery UI datepicker Add Minimum Booking Days
Reservation/booking Form Using jQuery UI datepicker Add Minimum Booking Days

Time：07-07

I'm creating a reservation/booking form using jQuery UI datepicker with the following code. I would like to have a minimum of 3 (this number may change) days booking. So for example when someone selects a pick-up date of 07/04/2022 the return date automatically starts from 07/07/2022 or 3 days from their selected pick-up date.

// Set reservation form date pickers
   //
   jQuery("#cbx_reservation-form__pick-up-date-input, #cbx_reservation-form__return-date-input").datepicker({
        rangeSelect: true,
        beforeShow: customRange,
        onSelect: customRange,
        minDate: ' 1d',
        dateFormat: 'mm/dd/yy',
        numberOfMonths: 2, 
    });

    function customRange(input) {
        if (input.id == "cbx_reservation-form__pick-up-date-input") {

            jQuery("#ui-datepicker-div td").off();

            if (selectedDate != null) {
                jQuery('#cbx_reservation-form__return-date-input').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
            }
        }
        if (input.id == "cbx_reservation-form__return-date-input") {

            jQuery("#ui-datepicker-div td").on({
                mouseenter: function() {
                    jQuery(this).parent().addClass("finalRow");
                    jQuery(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                    jQuery(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
               },
                mouseleave: function() {
                    jQuery(this).parent().removeClass("finalRow");
                    jQuery("#ui-datepicker-div td").removeClass("highlight");
                }
            });

            var selectedDate = jQuery("#cbx_reservation-form__pick-up-date-input").datepicker("getDate");                
            if (selectedDate != null) {
                jQuery('#cbx_reservation-form__return-date-input').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
            }
        }
    } // End reservation form date pickers

Here is the HTML

    <!-- Reservation form starts -->               
<form id="cbx_reservation-form" method="get" action="/reservations/">
    <div >
        <div ><!-- Reservation form pick-up and return location starts -->               
            <div >
                <div ><!-- Reservation form pick-up location starts -->
                    <div >
                        <label for="cbx_reservation-form__pick-up-location-select" >Pick-up Location</label>
                        <select name="pick_up_location"  id="cbx_reservation-form__pick-up-location-select" data-placeholder="Please Select Pickup Location" tabindex="-1" aria-hidden="true" required>
                            <option value="" disabled selected hidden>Select location</option>
                        </select>
                        <div ><!-- Custom pick-up location Ends--> 
                            <label for="cbx_reservation-form__pick_up_location_custom" >Pick-up Address</label>
                            <input type="text" name="pick_up_location_custom" placeholder="Enter a location" autocomplete="off"  id="cbx_reservation-form__pick_up_location_custom">                                             
                        </div> <!-- Custom pick-up location Ends--> 
                    </div>
                </div><!-- Reservation form pick-up location ends -->                       
                <div ><!-- Reservation form return location starts -->
                    <div >
                        <label for="cbx_reservation-form__return-location-select" >Return Location</label>
                        <select name="return_location"  id="cbx_reservation-form__return-location-select" data-placeholder="Please Select Return Location" tabindex="-1" aria-hidden="true" required>
                            <option value="" disabled selected hidden>Select location</option>
                        </select>
                        <div ><!-- Custom Return location Ends--> 
                            <label for="cbx_reservation-form__return_location_custom" >Return Address</label>
                            <input type="text" name="return_location_custom" placeholder="Enter a location" autocomplete="off"  id="cbx_reservation-form__return_location_custom">                                             
                        </div> <!-- Custom Return location Ends--> 
                    </div>
                </div><!-- Reservation form return location ends -->
            </div>          
        </div><!-- Reservation form pick-up and return location ends -->    
        <div ><!-- Reservation form pick-up, return, date and time starts -->
            <div >
                <div >
                    <div ><!-- Reservation form pick-up date starts -->
                        <div >
                            <label for="cbx_reservation-form__pick-up-date-input" >Pick-up Date</label>
                            <div >
                                <input type="text" name="pick_up_date" readonly="readonly" placeholder="mm/dd/yy"  id="cbx_reservation-form__pick-up-date-input" data-date-format="mm/dd/yy" required>
                            </div>
                        </div>
                    </div><!-- Reservation form pick-up date ends -->
                    <div ><!-- Reservation form pick-up time starts -->
                        <div >
                            <label for="cbx_reservation-form__pick-up-time-input" >Pick-up Time</label>
                            <input type="text" name="pick_up_time" autocomplete="off"  id="cbx_reservation-form__pick-up-time-input" required>

                        </div>
                    </div><!-- Reservation form pick-up time ends -->
                </div>
                <div >          
                    <div ><!-- Reservation form return date starts -->
                        <div >
                            <label for="cbx_reservation-form__return-date-input" >Return Date</label>
                            <div >
                                <input type="text" name="return_date" readonly="readonly" placeholder="mm/dd/yy"  id="cbx_reservation-form__return-date-input" data-date-format="mm/dd/yy" required>
                            </div>
                        </div>
                    </div><!-- Reservation form return date ends -->
                    <div ><!-- Reservation form return time starts -->
                        <div >
                            <label for="cbx_reservation-form__return-time-input" >Return Time</label>
                            <input type="text" name="return_time" autocomplete="off"  id="cbx_reservation-form__return-time-input" required>                                              
                        </div>
                    </div><!-- Reservation form return time ends -->
                </div>
            </div>  
            
        </div><!-- Reservation form pick-up, return, date and time ends -->
       
        <div ><!-- Reservation form submit-button starts -->              
            <div >
                <div > 
                    <div >
                        <a href="/reservations/my-reservations/">View/Modify Reservation</a>
                        </div>
                </div>
                <div >  
                    <div >   
                        <input type="submit"  value="Search">    
                    </div>
                </div>
            </div>
        </div><!-- Reservation form submit-button ends -->              
        <div ><!-- Reservation form required-notice starts -->
            <div >
                <div >Please fill in all required fields.</div>
            </div>
        </div><!-- Reservation form required-notice ends -->
        <div ><!-- Reservation form hidden-input starts -->
            <input type="hidden" id="terms_and_conditions" name="terms_and_conditions" value="1">
            <input type="hidden" name="target_step" value="2">
        </div><!-- Reservation form hidden-input ends -->
    </div>
</form><!-- Reservation form ends -->

How can I add the minimum booking days to the return date?

CodePudding user response：

Consider the following.

jQuery(function($) {
  // Set reservation form date pickers
  $("#cbx_reservation-form__pick-up-date-input, #cbx_reservation-form__return-date-input").datepicker({
    rangeSelect: true,
    //beforeShow: customRange,
    onSelect: customRange,
    minDate: ' 1d',
    dateFormat: 'mm/dd/yy',
    numberOfMonths: 2,
  });

  function customRange(input, inst) {
    if ($(this).is("#cbx_reservation-form__pick-up-date-input")) {
      var selected = $(this).datepicker("getDate");
      if (selected != null) {
        selected.setDate(selected.getDate()   3);
        $("#cbx_reservation-form__return-date-input").prop("disabled", false).datepicker("option", "minDate", selected);
      }
    }
  } // End reservation form date pickers
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<form id="cbx_reservation-form" method="get" action="/reservations/">
  <div >
    <div >
      <!-- Reservation form pick-up and return location starts -->
      <div >
        <div >
          <!-- Reservation form pick-up location starts -->
          <div >
            <label for="cbx_reservation-form__pick-up-location-select" >Pick-up Location</label>
            <select name="pick_up_location"  id="cbx_reservation-form__pick-up-location-select" data-placeholder="Please Select Pickup Location" tabindex="-1"
              aria-hidden="true" required>
              <option value="" disabled selected hidden>Select location</option>
            </select>
            <div >
              <!-- Custom pick-up location Ends-->
              <label for="cbx_reservation-form__pick_up_location_custom" >Pick-up Address</label>
              <input type="text" name="pick_up_location_custom" placeholder="Enter a location" autocomplete="off"  id="cbx_reservation-form__pick_up_location_custom">
            </div>
            <!-- Custom pick-up location Ends-->
          </div>
        </div>
        <!-- Reservation form pick-up location ends -->
        <div >
          <!-- Reservation form return location starts -->
          <div >
            <label for="cbx_reservation-form__return-location-select" >Return Location</label>
            <select name="return_location"  id="cbx_reservation-form__return-location-select" data-placeholder="Please Select Return Location" tabindex="-1"
              aria-hidden="true" required>
              <option value="" disabled selected hidden>Select location</option>
            </select>
            <div >
              <!-- Custom Return location Ends-->
              <label for="cbx_reservation-form__return_location_custom" >Return Address</label>
              <input type="text" name="return_location_custom" placeholder="Enter a location" autocomplete="off"  id="cbx_reservation-form__return_location_custom">
            </div>
            <!-- Custom Return location Ends-->
          </div>
        </div>
        <!-- Reservation form return location ends -->
      </div>
    </div>
    <!-- Reservation form pick-up and return location ends -->
    <div >
      <!-- Reservation form pick-up, return, date and time starts -->
      <div >
        <div >
          <div >
            <!-- Reservation form pick-up date starts -->
            <div >
              <label for="cbx_reservation-form__pick-up-date-input" >Pick-up Date</label>
              <div >
                <input type="text" name="pick_up_date" readonly="readonly" placeholder="mm/dd/yy"  id="cbx_reservation-form__pick-up-date-input" data-date-format="mm/dd/yy" required>
              </div>
            </div>
          </div>
          <!-- Reservation form pick-up date ends -->
          <div >
            <!-- Reservation form pick-up time starts -->
            <div >
              <label for="cbx_reservation-form__pick-up-time-input" >Pick-up Time</label>
              <input type="text" name="pick_up_time" autocomplete="off"  id="cbx_reservation-form__pick-up-time-input" required>

            </div>
          </div>
          <!-- Reservation form pick-up time ends -->
        </div>
        <div >
          <div >
            <!-- Reservation form return date starts -->
            <div >
              <label for="cbx_reservation-form__return-date-input" >Return Date</label>
              <div >
                <input type="text" name="return_date" readonly="readonly" placeholder="mm/dd/yy"  id="cbx_reservation-form__return-date-input" data-date-format="mm/dd/yy" required disabled="true" />
              </div>
            </div>
          </div>
          <!-- Reservation form return date ends -->
          <div >
            <!-- Reservation form return time starts -->
            <div >
              <label for="cbx_reservation-form__return-time-input" >Return Time</label>
              <input type="text" name="return_time" autocomplete="off"  id="cbx_reservation-form__return-time-input" required>
            </div>
          </div>
          <!-- Reservation form return time ends -->
        </div>
      </div>

    </div>
    <!-- Reservation form pick-up, return, date and time ends -->

    <div >
      <!-- Reservation form submit-button starts -->
      <div >
        <div >
          <div >
            <a href="/reservations/my-reservations/">View/Modify Reservation</a>
          </div>
        </div>
        <div >
          <div >
            <input type="submit"  value="Search">
          </div>
        </div>
      </div>
    </div>
    <!-- Reservation form submit-button ends -->
    <div >
      <!-- Reservation form required-notice starts -->
      <div >
        <div >Please fill in all required fields.</div>
      </div>
    </div>
    <!-- Reservation form required-notice ends -->
    <div >
      <!-- Reservation form hidden-input starts -->
      <input type="hidden" id="terms_and_conditions" name="terms_and_conditions" value="1">
      <input type="hidden" name="target_step" value="2">
    </div>
    <!-- Reservation form hidden-input ends -->
  </div>

getDate() Returns the current date for the datepicker or null if no date has been selected.

It's sometimes easier to manipulate the Date object instead.

Page link：https//www.codepudding.com/Blockchain/467066.html

Prev:How is path parameter name conflicts handled in react-router-dom?
Next:How can I compile a set of ASM instructions in X86 Encoder Decoder (XED) syntax
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding