Welcome to Space Hotel

Enjoy your stay,
feels like at home

Enjoy the new experiences that we offer and we'll guarantee
you that this one would be an awesome occasion

Adults Above 12
1
Children Ages 2–12
0
Infants Under 2
0

HTML:

          
            <!-- Hero Section -->
            <div class="gradient-overlay-half-white-v2 bg-img-hero" style="background-image: url(../../assets/img/demo/hotel/jumbotron.jpg);">
              <div class="d-lg-flex align-items-lg-center flex-lg-column pb-sm-6">
                <div class="container space-2 space-3--sm space-4--lg">
                  <!-- Title -->
                  <div class="w-lg-50 mb-4 mb-sm-9 pb-1">
                    <h6 class="text-uppercase text-gray-700 font-weight-medium letter-spacing-0_06 mb-3">Welcome to Space Hotel</h6>
                    <h2 class="display-4 font-size-48--md-down mb-3">Enjoy your stay,<br class="d-none d-lg-inline-block"> feels like at <strong class="text-primary">home</strong></h2>
                    <p>Enjoy the new experiences that we offer and we'll guarantee<br class="d-none d-md-inline-block"> you that this one would be an awesome occasion</p>
                  </div>
                  <!-- End Title -->

                  <form class="bg-white rounded shadow-sm p-5" action="#">
                    <div class="row">
                      <div class="col-md-6 col-lg-3">
                        <div class="form-group mb-3">
                          <label class="text-uppercase font-weight-medium">Check-in</label>
                          <div id="datepickerWrapperFrom" class="u-datepicker input-group">
                            <div class="input-group-prepend">
                              <div id="calendarFromLabel" class="input-group-text">
                                <svg viewBox="0 0 24 24" width="24" height="24" class="stroke-gray-200" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                              </div>
                            </div>

                            <input class="js-range-datepicker form-control bg-white text-muted" type="text" placeholder="mm/dd/yyyy" aria-label="From" aria-describedby="calendarFromLabel"
                                   data-rp-wrapper="#datepickerWrapperFrom"
                                   data-rp-date-format="D, M d">
                          </div>
                        </div>
                      </div>

                      <div class="col-md-6 col-lg-3">
                        <div class="form-group mb-3">
                          <label class="text-uppercase font-weight-medium">Check-out</label>
                          <div id="datepickerWrapperTo" class="u-datepicker input-group">
                            <div class="input-group-prepend">
                              <div id="calendarFromLabel" class="input-group-text">
                                <svg viewBox="0 0 24 24" width="24" height="24" class="stroke-gray-200" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                              </div>
                            </div>

                            <input class="js-range-datepicker form-control bg-white text-muted" type="text" placeholder="mm/dd/yyyy" aria-label="To" aria-describedby="calendarToLabel"
                                   data-rp-wrapper="#datepickerWrapperTo"
                                   data-rp-date-format="D, M d">
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-6">
                        <div class="row align-items-end">
                          <div class="col-9">
                            <div class="form-group mb-3">
                              <label class="text-uppercase font-weight-medium">Guests</label>
                              <div class="js-guests u-guests input-group position-relative">
                                <div class="input-group-prepend z-index-2">
                                  <div class="input-group-text">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18">
                                      <path d="M14.286,18H1.715A1.7,1.7,0,0,1,0,16.313V14.85a4.768,4.768,0,0,1,4.8-4.725h.6a6.307,6.307,0,0,0,5.207,0h.6A4.769,4.769,0,0,1,16,14.85v1.462A1.7,1.7,0,0,1,14.286,18ZM8,9A4.541,4.541,0,0,1,3.429,4.5a4.572,4.572,0,0,1,9.142,0A4.541,4.541,0,0,1,8,9Z" class="fill-gray-200"/>
                                    </svg>
                                  </div>
                                </div>

                                  <input class="js-guests-total u-guests__input form-control bg-white text-muted" type="text" value="1 guest" readonly data-max-num-guests="20">

                                  <svg class="u-guests__input-i" xmlns="http://www.w3.org/2000/svg" width="11.964" height="6.974" viewBox="0 0 11.964 6.974">
                                    <g data-name="chevron down" transform="translate(-0.018 -0.013)">
                                      <path d="M5.517,6.789.193,1.675a.614.614,0,0,1,0-.893l.621-.6a.677.677,0,0,1,.929,0l4.24,4.053L10.222.184a.677.677,0,0,1,.929,0l.621.6a.614.614,0,0,1,0,.893L6.447,6.789A.677.677,0,0,1,5.517,6.789Z" transform="translate(0.018 0.013)">
                                    </g>
                                  </svg>

                                  <div class="u-guests__options p-4 shadow">
                                    <div class="d-flex justify-content-between mb-3">
                                      <div class="u-guests__label font-weight-medium">
                                        Adults
                                        <em class="small u-guests__label-info">Above 12</em>
                                      </div>

                                      <div class="u-guests__data d-flex align-items-center">
                                        <span class="js-adults-ctrl-minus u-guests__ctrl u-guests__ctrl--minus">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect class="fill-primary" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </span>

                                        <span class="js-adults-value u-guests__value">1</span>

                                        <span class="js-adults-ctrl-plus u-guests__ctrl u-guests__ctrl--plus">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect class="fill-primary" x="4" y="11" width="16" height="2" rx="1"></rect>
                                              <rect class="fill-primary" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </span>
                                      </div>
                                    </div>

                                    <div class="d-flex justify-content-between mb-3">
                                      <div class="u-guests__label font-weight-medium">
                                        Children
                                        <em class="small u-guests__label-info">Ages 2–12</em>
                                      </div>

                                      <div class="u-guests__data d-flex align-items-center">
                                        <span class="js-children-ctrl-minus u-guests__ctrl u-guests__ctrl--minus">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect class="fill-primary" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </span>

                                        <span class="js-children-value u-guests__value">0</span>

                                        <span class="js-children-ctrl-plus u-guests__ctrl u-guests__ctrl--plus">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect class="fill-primary" x="4" y="11" width="16" height="2" rx="1"></rect>
                                              <rect class="fill-primary" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </span>
                                      </div>
                                    </div>

                                    <div class="d-flex justify-content-between mb-3">
                                      <div class="u-guests__label font-weight-medium">
                                        Infants
                                        <em class="small u-guests__label-info">Under 2</em>
                                      </div>

                                      <div class="u-guests__data d-flex align-items-center">
                                        <span class="js-infant-ctrl-minus u-guests__ctrl u-guests__ctrl--minus">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect class="fill-primary" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </span>

                                        <span class="js-infant-value u-guests__value">0</span>

                                        <span class="js-infant-ctrl-plus u-guests__ctrl u-guests__ctrl--plus">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect class="fill-primary" x="4" y="11" width="16" height="2" rx="1"></rect>
                                              <rect class="fill-primary" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </span>
                                      </div>
                                    </div>

                                    <div class="text-right">
                                      <a class="js-guests-apply u-guests__apply" href="javascript:;">Apply</a>
                                    </div>
                                  </div>
                              </div>
                            </div>
                          </div>

                          <div class="col-3 pl-0 pl-sm-3">
                            <button type="submit" class="btn btn-primary d-block w-100 mb-3 px-2 px-sm-3">
                              <svg xmlns="http://www.w3.org/2000/svg" width="17.998" height="17.967" viewBox="0 0 17.998 17.967">
                                <g transform="translate(0 0)">
                                  <path  d="M16.161,17.967a.839.839,0,0,1-.6-.248l-3.506-3.5a.838.838,0,0,1-.246-.6v-.572a7.3,7.3,0,1,1,1.265-1.264h.573a.842.842,0,0,1,.6.246l3.506,3.5a.848.848,0,0,1,0,1.193l-1,.993A.83.83,0,0,1,16.161,17.967ZM7.312,2.807a4.491,4.491,0,1,0,4.5,4.491A4.5,4.5,0,0,0,7.312,2.807Z" class="fill-white"/>
                                </g>
                              </svg>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- End Hero Section -->
          
        

CSS library:

        
          <link rel="stylesheet" href="../../assets/vendor/flatpickr/dist/flatpickr.min.css">
        
      

JS library and initialization:

        
          <!-- JS Implementing Plugins -->
          <script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>

          <!-- JS Space -->
          <script src="../../assets/js/components/hs.range-datepicker.js"></script>
          <script src="../../assets/js/helpers/hs.set-guest-count.js"></script>

          <!-- JS Plugins Init. -->
          <script>
            $(document).on('ready', function () {
              // initialization of setGuestCount
              $.HSCore.helpers.HSsetGuestCount.init();

              // initialization of range datepicker
              $.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
            });
          </script>