日期范围选择器和计算器

时间：2018-12-12 22:37:04

标签： javascript html css bootstrap-4

我有一个酒店预订表格，该表格根据成人，老年人和学生的人数计算每人的价格。我想包含一个日期范围选择器，该日期范围选择器将根据所选天数来计算总费用，但是当我包含第二个日历时，它不会显示（没有下拉列表）。如何包含第二个日历，以便选择结束日期并计算总费用？ 

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 :(得分：0)

首先，我在表末尾插入了一个开始标记，并在表单组的末尾插入了丢失的结束<div>标记。您已经注意到要接受日期的输入被设置为键入“文本”。我将这两个更改为input type="date" 现在，日历下拉列表显示在两个输入上。您可以使用js来calculate the difference between the two selected dates，并根据相关价格进行计算。 另外，如果您希望一次选择两个日期，则可以使用Dan Grossman的开源daterangepicker工具之类的工具。

希望这会有所帮助。

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>

相关问题
最新问题