Bootstrap Date Picker in Availability Check Form


When working on Hotel website design, we may need ‘Availability Check Form’. We can check how to add Availability Check Form with Bootstrap Date Picker.

1. Create the html markup for Availability Check. You can use the Bootstrap form builder at http://bootsnipp.com/forms

      <form class="form-inline" method="post" action="availability.php"  name="availability">
        <fieldset>
          <div class="form-group input-group date">
          <input id="checkin" name="checkin" type="text" class="form-control input-lg" placeholder="Check In" required><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
          </div>

          <div class="form-group input-group date">
          <input id="checkout" name="checkout" type="text" class="form-control input-lg" placeholder="Check Out" required><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
          </div>

          <div class="form-group">
          <input id="adults" name="adults" type="text" class="form-control input-lg" placeholder="No.of Adults" required>
          </div>

          <div class="form-group">
          <input id="childrens" name="childrens" type="text" class="form-control input-lg" placeholder="No.of Childrens" required>
          </div>
          <button type="submit" id="submit" name="submit" class="btn btn-success input-lg">Check Availability</button>
      </fieldset>
      </form>

2. Include jQuery library and datepicker plugin on the web page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!--no needed if your site already uses jQuery library -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

3. There are a number of possible plugin options described in the documentation. For our purposes, we specify the format of the date, define a container element, highlight today’s date, and close the interactive popup after a date has been chosen. All that, all that is left is to initialize the plugin.

The complete javascript code we’ll use looks like this:

    <script>
    $('.input-group.date').datepicker({
    format: "yyyy/mm/dd",
    startDate: "2016-03-01",
    endDate: "20120-01-01",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
    });
    </script>
Related Posts Plugin for WordPress, Blogger...