javascript - Check if start date is less than end date (without using any pluguin) - Stack Overflow

admin管理员组

文章数量:1402788

Here I have two dates fromDate and toDate, I want to check if the fromDate < toDate but it only checks if the day is smaller. For example if you put fromDate: 01/01/2016 and toDate: 15/01/2016 works fine but if I put fromDate: 01/01/2016 and toDate: 15/10/2016 it does not get any error.

Here is my code in jsFiddle.

$(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();
  });
});

.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;
}

<script src=".9.1.js"></script>
<script src=".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=".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=".png" id="toDateImgId">
      </td>


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

Here I have two dates fromDate and toDate, I want to check if the fromDate < toDate but it only checks if the day is smaller. For example if you put fromDate: 01/01/2016 and toDate: 15/01/2016 works fine but if I put fromDate: 01/01/2016 and toDate: 15/10/2016 it does not get any error.

Here is my code in jsFiddle.

$(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();
  });
});

.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;
}

<script src="https://code.jquery./jquery-1.9.1.js"></script>
<script src="https://code.jquery./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/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/nl2mcq2rv/calendar.png" id="toDateImgId">
      </td>


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

• javascript
• jquery
• html
• datepicker

Share Improve this question Follow asked Apr 1, 2016 at 7:53 ReshaDReshaD 94633 gold badges1818 silver badges3030 bronze badges 1

• In your question, the examples of dates that you expect should fail (fromDate: 01/01/2016 and toDate: 15/10/2016) should actually pass, as the 15th of October is after 1st January. – Aaron D Commented Apr 1, 2016 at 7:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You could check out the Date Object in Javascript JavaScript Date Library With that you can do something like

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?');
}

You need to get the date objects and then pare the values, in your case you are doing string parison instead of date parison.

You can use the datepicker.getDate() method to get the currently selected date object from the input field.

$(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();
  });
});

.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;
}

<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis./ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis./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/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/nl2mcq2rv/calendar.png" id="toDateImgId">
      </td>


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

本文标签： javascriptCheck if start date is less than end date (without using any pluguin)Stack Overflow