检查开始日期是否小于结束日期（不使用任何插件）

Question

此处我有两个日期fromDate和toDate，我想检查一下fromDate＆lt; toDate但它只检查日期是否较小。例如，如果您将fromDate: 01/01/2016和toDate: 15/01/2016设置为正常，但如果我放置fromDate: 01/01/2016和toDate: 15/10/2016则不会出现任何错误。

以下是jsFiddle中的代码。

＆＃13;

＆＃13;

$(function() {
  $(".date-picker").datepicker({
    dateFormat: 'dd/mm/yy'
  });

  $(".date-picker").each(function() {
    $(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
  });

  $('input:button').click(function(e) {
    $("#fDate").removeClass("red");
    $("#tDate").removeClass("red");
    var fromDate = $("#fDate").val();
    var toDate = $("#tDate").val();

    if (toDate <= fromDate) { //here only checks the day not month and year
      $("#fDate").addClass("red");
      $("#tDate").addClass("red");
      errors++;
    }

    if (errors) e.preventDefault();
  });
});

＆＃13;

.imageInputWrapper {
  width: 172px;
  border: solid 1px white;
  background-color: white;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 2px 0 #C2C2C2;
}
.red {
  box-shadow: 0px 0px 2px 2px red;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<form>
  <table>

    <tr>
      <td>
        <input id="fDate" class="date-picker" type="text" name="fromDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" />
        <img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="fromDateImgId">
      </td>
    </tr>
    <tr>
      <td>
        <input id="tDate" class="date-picker" type="text" name="toDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" />
        <img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="toDateImgId">
      </td>


    </tr>
    <input type="button" value="submit">
  </table>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在Javascript中查看日期对象 JavaScript Date Library 有了它，你可以做类似

的事情

var fromDate = '04/14/2016',
    toDate = '04/16/2016',
    fdate = new Date(fromDate),
    tdate = new Date(toDate);

if (fdate.valueOf() > tdate.valueOf()) {
    console.log('Departure can not be before arrival silly. What are you a time traveler?');
}

Answer 2

您需要获取日期对象然后比较值，在您的情况下，您正在进行字符串比较而不是日期比较。

您可以使用datepicker.getDate()方法从输入字段中获取当前选定的日期对象。

＆＃13;

＆＃13;

$(function() {
  $(".date-picker").datepicker({
    dateFormat: 'dd/mm/yy'
  });

  $(".date-picker").each(function() {
    $(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
  });

  $('input:button').click(function(e) {
    $("#fDate").removeClass("red");
    $("#tDate").removeClass("red");
    var fromDate = $("#fDate").datepicker('getDate');
    var toDate = $("#tDate").datepicker('getDate');

    if (toDate <= fromDate) { //here only checks the day not month and year
      $("#fDate").addClass("red");
      $("#tDate").addClass("red");
      errors++;
    }

    if (errors) e.preventDefault();
  });
});

＆＃13;

.imageInputWrapper {
  width: 172px;
  border: solid 1px white;
  background-color: white;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 2px 0 #C2C2C2;
}
.red {
  box-shadow: 0px 0px 2px 2px red;
}

＆＃13;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>


<form>
  <table>

    <tr>
      <td>
        <input id="fDate" class="date-picker" type="text" name="fromDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" />
        <img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="fromDateImgId">
      </td>
    </tr>
    <tr>
      <td>
        <input id="tDate" class="date-picker" type="text" name="toDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" />
        <img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="toDateImgId">
      </td>


    </tr>
    <input type="button" value="submit">
  </table>
</form>

＆＃13;

＆＃13;

＆＃13;