Question

我想生产类似于酒店预订系统的登记和结账的东西。到目前为止，我允许用户输入预订日期（即登记入住）。但是，我想实现一个未经编辑的输入，其值为checkin加上夜数。

因此，在用户选择了预订日期和夜晚之后，它会将它们一起添加并在旁边显示结帐日期（但用户无法更改它）。在持续时间结束后，用户可以再次预订同一酒店，而无需告知用户他们已经预订了该酒店。

                <body>

                <form action="" method="POST">
                    <fieldset>
                        <legend>Personal Details: </legend>
                        <label for="phone">Phone:</label><input type="tel" name="phone" id="phone" required placeholder="Please enter in your phone number" pattern="[0-9]{4}[0-9]{3}[0-9]{3}" title="Please enter in a phone number in this format:#### ### ###">
                        <select name="country" required >
                            <option value=""></option>
                            <option value="US">US</option>
                            <option value="UK">UK</option>
                            <option value="AUS">AUS</option>

                        </select>
                    </fieldset>
                    <br>
                    <fieldset>
                        <legend>Booking Details: </legend>
                        <label for="date">Booking date: </label><input id="date"  type="date" name="date" min="2017-01-04">
                        <label for="numberOfRooms">Number of Rooms:</label><input id="NumberOfRooms"  type="number" name="numberOfRooms" min="1" max="4">
                        <label for="numberOfNights">Number of Nights:</label><input id="NumberOfNights"  type="number" name="numberOfNights" min="1" max="60">
                        <p>Do you require breakfast?</p>
                        <label for="yesBreakfast">Yes:</label><input id="yesBreakfast" type="radio" name="meals" value="yesBreakfast">
                        <label for="noBreakfast">No:</label><input id="noBreakfast" type="radio" name="meals" value="noBreakfast">
                        <br>
                        <!--<label for="balcony">Do you require a balcony?</label><input id="balcony" type="checkbox" name="balcony" value="yes" checked>-->
                        <br>
                        <button name="submit" type="submit">Submit</button>

                    </fieldset>
                </form>


            </body>
            </html>

书籍和酒店的数据库表书桌： id（int 11）用户名（varchar 30） HOTEL_ID（INT11）电话（varchar 50）日期（日期时间） num_rooms（int 60） num_nights（int 4）

酒店表 id（int 11） HOTEL_NAME（文本） Hotel_location（文本） Hotel_price（int 11） image（varchar 500）描述（文本）

Answer 1

我建议您使用momentjs处理与日期相关的内容。
我在date和NumberOfNights添加了更改事件以致电updateCheckout()，该功能将处理结帐日期

希望有所帮助

＆＃13;

$(document).ready(function() {
  $('#date, #NumberOfNights').on("change", updateCheckout);

  $('#price, #NumberOfNights, #NumberOfRooms').on("change", updateTotalPrice);

  function updateCheckout() {
    var bookingDate = $('#date').val();
    var numOfNights = $('#NumberOfNights').val();
    if (bookingDate != '' && numOfNights != '') {
      var new_date = moment(bookingDate, "YYYY-MM-DD").add(numOfNights, 'days').format("YYYY-MM-DD");
      $('#checkout_date').text(new_date);
    } else {
      $('#checkout_date').text('N/A');
    }
  }

  function updateTotalPrice() {
    var price = $('#price').val();
    var numOfNights = $('#NumberOfNights').val();
    var NumberOfRooms = $('#NumberOfRooms').val();

    if (price != '' && numOfNights != '' && NumberOfRooms != '') {
      var total_price = +price * +numOfNights * +NumberOfRooms;
      $('#total_price').text('$' + total_price);
    } else {
      $('#total_price').text('N/A');
    }
  }

});

＆＃13;

#checkout_date,
#total_price {
  color: red;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body>

  <form action="" method="POST">
    <fieldset>
      <legend>Personal Details: </legend>
      <label for="phone">Phone:</label>
      <input type="tel" name="phone" id="phone" required placeholder="Please enter in your phone number" pattern="[0-9]{4}[0-9]{3}[0-9]{3}" title="Please enter in a phone number in this format:#### ### ###">
      <select name="country" required>
        <option value=""></option>
        <option value="US">US</option>
        <option value="UK">UK</option>
        <option value="AUS">AUS</option>

      </select>
    </fieldset>
    <br>
    <fieldset>
      <legend>Booking Details: </legend>
      <label for="date">Booking date: </label>
      <input id="date" type="date" name="date" min="2017-01-04">
      <label for="numberOfRooms">Number of Rooms:</label>
      <input id="NumberOfRooms" type="number" name="numberOfRooms" min="1" max="4">
      <label for="numberOfNights">Number of Nights:</label>
      <input id="NumberOfNights" type="number" name="numberOfNights" min="1" max="60">
      <label for="price">Single Room Price: </label>
      <input id="price" type="number" min="0">
      <br>
      <br>
      <label>Checkout Date:</label>
      <span id="checkout_date"> N/A</span>
      <p>Do you require breakfast?</p>
      <label for="yesBreakfast">Yes:</label>
      <input id="yesBreakfast" type="radio" name="meals" value="yesBreakfast">
      <label for="noBreakfast">No:</label>
      <input id="noBreakfast" type="radio" name="meals" value="noBreakfast">
      <br>
      <!--<label for="balcony">Do you require a balcony?</label><input id="balcony" type="checkbox" name="balcony" value="yes" checked>-->
      <br>

      <label>Total Price:</label>
      <span id="total_price"> N/A</span>
      <br><br>
      <button name="submit" type="submit">Submit</button>

    </fieldset>
  </form>


</body>

</html>

＆＃13;

如何设置结帐日期并阻止用户更改日期？

1 个答案: