javascript - 比较两个自定义格式日期jquery

Question

我尝试验证我的日期，如果开始日期小于结束日期，它应该发出警报，但它只适用于同一个月，但是当我将一个月份的日期与另一个月份的日期进行比较时，它会阻止我选择较少的日期即使已经是了。

这是我到目前为止所做的，

$('#datepicker2').change(function () {
var startDate =  new Date($('#datepicker').val());
var endDate = new Date($('#datepicker2').val());
if (startDate < endDate){
alert("selected date is above pickup date, ");
}
});

这是我的 html

   <div class="col-md-4">
            <div class="row">
              <div class="col-md-6">
                <input type="text" id="datepicker" required name="pickupDate" placeholder="Pickup Date">
              </div>
              <div class="col-md-6">
                <input class="" id="datetimepicker4" autocomplete="off" required name="pickupTime" placeholder="Pickup Time">
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="row ct-date-row">
              <div class="col-md-6">
                <input type="text" id="datepicker2" required name="dropDate" placeholder="Drop off Date">
              </div>
              <div class="col-md-6">
                <input class="" autocomplete="off" id="datetimepicker5"  required name="dropTime" placeholder="Drop Time">
              </div>
            </div>
          </div>

我的日期格式是 d/m/y 如果这引起问题，那么我如何在新日期中定义甲酸盐并比较它们。谢谢

我想要在同一日期时它隐藏 jquery 的先前时间准时下拉列表。

    $('#datetimepicker5').timepicker({
    timeFormat: 'HH:mm',
});
    $('#datetimepicker4').timepicker({
    timeFormat: 'HH:mm',
});

我的时间格式我不会获得所选的时间，

     jQuery('document').ready(function(){

            jQuery('#datetimepicker5').on('change paste keyup', function() {
                var x = jQuery("#datetimepicker5").val();


                alert(x);
            });
        });

Answer 1

所以，您正在使用 jQuery Ui DatePicker，有一种使用 getDate 获取日期的 native 方法，在这里:

<小时/>

要比较您的日期是否等于或相同，您需要使用 Date.parse() ，你需要这样做:

if (Date.parse(startDate) === Date.parse(endDate))

$(function() {
  $("#datepicker").datepicker({
    dateFormat: "d/m/y"
  });
  $("#datepicker2").datepicker({
    dateFormat: "d/m/y"
  });
  $('#datetimepicker5').timepicker({
    timeFormat: 'HH:mm',
  });
  $('#datetimepicker4').timepicker({
    timeFormat: 'HH:mm',
  });
});

$('#datepicker2').on('paste keyup change', function() {
  var startDate = $('#datepicker').datepicker("getDate");
  var endDate = $('#datepicker2').datepicker("getDate");
  if (startDate > endDate) {
    alert("selected date is above pickup date, ");
  } else if (Date.parse(startDate) === Date.parse(endDate)) {
    alert("same");
    var dt = new Date();
    var phours = dt.getHours() + 3;
    var time = phours + ":" + "00";
    alert(time);
    jQuery('#datetimepicker5').timepicker({
      minTime: time
    });
    jQuery('#datetimepicker4').timepicker({
      minTime: time
    });
    $('#datetimepicker4').val(time)
    $('#datetimepicker5').val(time)
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://www.jonthornton.com/jquery-timepicker/jquery.timepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" integrity="sha256-zV9aQFg2u+n7xs0FTQEhY0zGHSFlwgIu7pivQiwJ38E=" crossorigin="anonymous" />

<div class="col-md-4">
  <div class="row">
    <div class="col-md-6">
      <input type="text" id="datepicker" required name="pickupDate" placeholder="Pickup Date">
    </div>
    <div class="col-md-6">
      <input class="" id="datetimepicker4" autocomplete="off" required name="pickupTime" placeholder="Pickup Time">
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="row ct-date-row">
    <div class="col-md-6">
      <input type="text" id="datepicker2" required name="dropDate" placeholder="Drop off Date">
    </div>
    <div class="col-md-6">
      <input class="" autocomplete="off" id="datetimepicker5" required name="dropTime" placeholder="Drop Time">
    </div>
  </div>
</div>