javascript - jQuery UI Datepicker - 返回日期、到达和离开

Question

我正在尝试制作一个预订网站（到达、离开），我可以使用 jQuery UI DatePicker 选择 2 个日期（一个用于到达，一个用于离开）。一旦我选择了第二个日期（离境），我希望程序计算到达和离境之间有多少天，并将其乘以 *50。一旦我得到那个数字，我想把它放在我的文本形式（价格）中。

所以，如果我给你一个例子。我会选择“25.05.2021”作为我的到来和“28.03.2021”作为离开。所以它会返回数字“3”。然后我会乘以 3*50，所以我会得到“150”并将“150”放在“价格”表格中。

$(function() {
  $("#datepicker").datepicker();
});

$(function() {
  $("#datepicker1").datepicker();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>Date 1: <input type="text" id="datepicker"></p>
<p>Date 2: <input type="text" id="datepicker1"></p>
<p>Price: <input type="text" id="vrniceno" disabled></p>

标签： javascriptjquery

Answer 1

您可以使用onSelectDatepicker 对象上的回调事件来更新总价。

此外，只需将 egdatepicker类添加到要转换为 jQuery Datepicker 对象的所有日期输入字段。

const DAY_IN_MILLIS = 1000 * 60 * 60 * 24;

const updateTotal = function() {
  const form = document.forms['booking'];
  const goingRate = form.elements['going-rate'].valueAsNumber; // No parsing needed
  const arrivalDate = $(form.elements['arrival-date']).datepicker('getDate');
  const departureDate = $(form.elements['departure-date']).datepicker('getDate');
  
  if (arrivalDate && departureDate) {
    const days = Math.ceil((departureDate - arrivalDate) / DAY_IN_MILLIS);
    const total = goingRate * days;
    $(form.elements.total).val(total.toFixed(2));
  }
}

$('.datepicker').datepicker({
  minDate: new Date(),
  onSelect: function(date, datepicker) {
    updateTotal();
  }
});

form {
  display: grid;
  grid-template-columns: 8em 1fr;
  grid-row-gap: 0.25em;
}

label {
  font-weight: bold;
}

label::after {
  content: ':';
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<h1>Hotel Booking</h1>
<form name="booking">
  <label>Arrival Date</label>
  <input type="text" name="arrival-date" class="datepicker">
  <label>Departure Date</label>
  <input type="text" name="departure-date" class="datepicker">
  <label>Going Rate ($)</label>
  <input type="number" name="going-rate" value="50.00" step="0.01">
  <label>Total ($)</label>
  <input type="number" name="total" step="0.01" disabled>
</form>