Question

我已经设置了一个HTML表单和一些JQuery。表单中的日期输入存储在cookie中。如果设置了cookie，则可以看到“设置其他日期”按钮。如果未设置cookie，则可以看到日期输入表单。

HTML：

<form id="datesinput" style="display: none;">
  <h3>Select dates:</h3>
  <lable>Check in</lable>
  <input type="date" id="checkindate" name="checkindate" value="" required/>
  <lable>Check out:</lable>
  <input type="date" id="checkoutdate" name="checkoutdate" value="" required/>
      <select id="currency" required>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
     </select>
  <input type="hidden" id="hotelid" name="hotelid" value="123" /><br />
  <input type="button" id="datesubmit" name="datesubmit" value="Submit dates" disabled/>
</form>

<div id="rates" style="display: none;">
  <a id="book-btn" href="#">Book from: <span id="price">0</span> / night</a>
  <a id="reset-btn">Select other dates</a>
</div>

JQuery的：

// Check if cookies are set and show form or rates

$(document).ready(function() {

  var checkInCookie = $.cookie('checkInDate');
  var checkOutCookie = $.cookie('checkOutDate');
  var checkCurrency = $.cookie('currency');

  if (checkInCookie && checkOutCookie && checkCurrency != null) {
    $('#datesinput').hide();
    $('#rates').show();
  } else {
    $('#datesinput').show();
    $('#rates').hide();
  }
});

// Attr. disabled to formsubmit, as long as checkin date and checkout dates are set

$(document).ready(function() {

  $('#datesubmit').attr('disabled', true);
  $('#checkindate, #checkoutdate').change(function() {

    if ($(this).val().length != 0)
      $('#datesubmit').attr('disabled', false);
    else
      $('#datesubmit').attr('disabled', true);

  })
});


// Set cookies on formsubmit

$("#datesubmit").click(function() {

  $.cookie("checkInDate", $("#checkindate").val());
  $.cookie("checkOutDate", $("#checkoutdate").val());
  $.cookie("currency", $("#currency").val());

  $("#rates").show();
  $("#datesinput").hide();

});

// Delete cookies onclick

$("#reset-btn").click(function() {

  $("#rates").hide();
  $("#datesinput").show();
  $.removeCookie("checkInDate");
  $.removeCookie("checkOutDate");
  $.removeCookie("currency");

});

我尝试实现的是，当两个输入字段#checkindate和#checkoutdate都不为空时，启用ID＃datesubmit的按钮，并且#checkindate小于#checkoutdate。

现在，我只检查其中一个输入字段的更改，然后启用该按钮。

如果有人能以优雅的方式帮助我检查两个领域，我会很高兴。

提前致谢！

Fiddle

PS：非常感谢用户：@gaetanoM - 正是我所描述的。附加问题：是否可以将#checkindate设置为小于#checkoutdate，但不能超过30天？

Answer 1

足以改变这一行：

if ($(this).val().length != 0)

使用：

if (new Date($('#checkindate').val()) < new Date($('#checkoutdate').val()))

更新后的fiddle

将两个date-input-field-values与JQuery和attr进行比较。禁用：false到按钮

1 个答案: