Выбор диапазона дат и калькулятор - PullRequest
Новая
       2

Выбор диапазона дат и калькулятор

0 голосов
/ 13 декабря 2018

У меня есть форма бронирования отелей, которая рассчитывает цены на человека в зависимости от количества взрослых, пожилых людей и студентов.Я хочу включить средство выбора диапазона дат, которое будет рассчитывать общую стоимость в зависимости от количества выбранных дней, но когда я включаю второй календарь, он не отображается (без раскрывающегося списка).Как я могу включить второй календарь, который позволит выбрать дату окончания и рассчитать общую стоимость?

update_amounts();
$('select').change(update_amounts);

function update_amounts() {
  var sum = 0.0;
  $('#tickets > tbody  > tr').each(function() {
    var qty = $(this).find('option:selected').val();
    var price = $(this).find('.price').text().replace(/[^\d.]/, '');
    var amount = (qty * price);
    sum += amount;
    $(this).find('.subtotal').text('$' + amount);
  });
  $('#total').val('$' + sum);
  $('#total').val('$')
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <table>

    <tbody>
      <tr>
        <td><strong>Adult</strong><a href="#" class="tooltip-1" data-placement="top" title="" data-original-title="16 - 65 years old"><sup class="icon-info-4"></sup></a>
          <span class="price">3,400</span>
        </td>
        <td>
          <div class="styled-select">
            <select class="form-control" name="adults" id="adults">
              <option value="">Select</option>
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>

            </select>
          </div>
        </td>
        <td class="text-center"><span class="subtotal">ksh 0</span>
        </td>
      </tr>
      <tr>
        <td><strong>Senior</strong><a href="#" class="tooltip-1" data-placement="top" title="" data-original-title="Over 65 years old"><sup class="icon-info-4">
    
                                                </sup></a><span class="price">3,400</span>
        </td>
        <td>
          <div class="styled-select">
            <select class="form-control" name="senior" id="senior">
              <option value="">Select</option>
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>

            </select>
          </div>
        </td>
        <td class="text-center"><span class="subtotal">$0</span>
        </td>
      </tr>
      <tr>
        <td><strong>Student >15 yrs</strong> <span class="price">2,000</span> </td>
        <td>
          <div class="styled-select">
            <select class="form-control" name="student" id="student">
              <option value="">Select</option>
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>

            </select>
          </div>
        </td>
        <td class="text-center"><span class="subtotal">$0</span>
        </td>
      </tr>
    </tbody>
  </table>


  <div class="form-group">
    <label>From?</label>
    <input type="text" class="form-control" id="date_pick" name="date_pick" data-date-format="M d, D" placeholder="Select a date">
    <div class="form-group">
      <label>To?</label>
      <input type="text" class="form-control" id="date_pick" name="date_pick" data-date-format="M d, D" placeholder="Select a date">
    </div>
    <div class="form-group">
      <label>Name and Lastname</label>
      <input type="text" class="form-control" id="name_lastname_booking" name="name_lastname_booking" placeholder="Name and Lastname">
    </div>
    <div class="form-group">
      <label>Email</label>
      <input type="email" class="form-control" id="email_booking" name="email_booking" placeholder="Email">
    </div>
    <div class="form-group">
      <label>Telephone</label>
      <input type="text" class="form-control" id="telephone_booking" name="telephone_booking" placeholder="Telephone">
    </div>
    <div class="form-group add_bottom_30">

    </div>
    <div class="form-group">
      <input type="submit" value="Book now" class="btn_full" id="submit-booking">
    </div>


    </form>

</body>

1 Ответ

0 голосов
/ 13 декабря 2018

Для начала я вставил начальный тег после конца таблицы и вставил отсутствующий закрывающий тег <div> в конец вашей группы форм.Входные данные, которые вы отметили для принятия дат, были установлены для типа «текст».Я изменил эти два значения на input type="date" Теперь выпадающий календарь отображается на обоих входах.Вы можете использовать js для расчета разницы между двумя выбранными датами и расчета по соответствующим ценам.В качестве альтернативы вы можете использовать что-то вроде инструмента с открытым исходным кодом daterangepicker от Dan Grossman, если вы предпочитаете выбирать обе даты в одном наборе.

Надеюсь, это поможет. 

update_amounts();
$('select').change(update_amounts);

function update_amounts() {
  var sum = 0.0;
  $('#tickets > tbody  > tr').each(function() {
    var qty = $(this).find('option:selected').val();
    var price = $(this).find('.price').text().replace(/[^\d.]/, '');
    var amount = (qty * price);
    sum += amount;
    $(this).find('.subtotal').text('$' + amount);
  });
  $('#total').val('$' + sum);
  $('#total').val('$')
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <table>

    <tbody>
      <tr>
        <td><strong>Adult</strong><a href="#" class="tooltip-1" data-placement="top" title="" data-original-title="16 - 65 years old"><sup class="icon-info-4"></sup></a>
          <span class="price">3,400</span>
        </td>
        <td>
          <div class="styled-select">
            <select class="form-control" name="adults" id="adults">
              <option value="">Select</option>
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>

            </select>
          </div>
        </td>
        <td class="text-center"><span class="subtotal">ksh 0</span>
        </td>
      </tr>
      <tr>
        <td><strong>Senior</strong><a href="#" class="tooltip-1" data-placement="top" title="" data-original-title="Over 65 years old"><sup class="icon-info-4">
    
                                                </sup></a><span class="price">3,400</span>
        </td>
        <td>
          <div class="styled-select">
            <select class="form-control" name="senior" id="senior">
              <option value="">Select</option>
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>

            </select>
          </div>
        </td>
        <td class="text-center"><span class="subtotal">$0</span>
        </td>
      </tr>
      <tr>
        <td><strong>Student >15 yrs</strong> <span class="price">2,000</span> </td>
        <td>
          <div class="styled-select">
            <select class="form-control" name="student" id="student">
              <option value="">Select</option>
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>

            </select>
          </div>
        </td>
        <td class="text-center"><span class="subtotal">$0</span>
        </td>
      </tr>
    </tbody>
  </table>

  <form>
    <div class="form-group">
      <label>From?</label>
      <input type="date" class="form-control" id="date_pick" name="date_pick" data-date-format="M d, D" placeholder="Select a date">
      <div class="form-group">
        <label>To?</label>
        <input type="date" class="form-control" id="date_pick" name="date_pick" data-date-format="M d, D" placeholder="Select a date">
      </div>
      <div class="form-group">
        <label>Name and Lastname</label>
        <input type="text" class="form-control" id="name_lastname_booking" name="name_lastname_booking" placeholder="Name and Lastname">
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" id="email_booking" name="email_booking" placeholder="Email">
      </div>
      <div class="form-group">
        <label>Telephone</label>
        <input type="text" class="form-control" id="telephone_booking" name="telephone_booking" placeholder="Telephone">
      </div>
      <div class="form-group add_bottom_30">

      </div>
      <div class="form-group">
        <input type="submit" value="Book now" class="btn_full" id="submit-booking">
      </div>
    </div>

  </form>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...