javascript function check if date is between

Question

I am trying to check if a date of birth entered in a form is between several dates and then populate another field based on the date of birth entered. I cannot seem to get it to read the dates.

Here is the function

function repeat()
{
 if(document.myform.dob1.value <='09/01/2005' && document.myform.dob1.value >='08/31/2006')
  document.myform.class1.value='Class 1';
 
 else
  document.myform.class1.value='Class 2';
}

Here is the form:

<body>
<form name="myform" method="post" action="insert_entries.php">

<table style="width: 139%" align="center">
 <tr>
  <td class="style2" style="width: 166px"><strong>FIRST NAME</strong></td>
  <td class="style2" style="width: 161px"><strong>LAST NAME</strong></td>
  <td class="style2" style="width: 66px"><strong>GENDER</strong></td>
  <td class="style2" style="width: 224px"><strong>DOB</strong></td>
  <td class="style2" style="width: 74px"><strong>CLASS</strong></td>
  <td class="style2" style="width: 104px"><strong>EVENT 1</strong></td>
  <td class="style2" style="width: 104px"><strong>EVENT 2</strong></td>
 </tr>
 <tr>
  <td style="width: 166px">
<input type="text" name="first1" size="35" style="width: 155px" /></td>
  <td style="width: 161px">
<input type="text" name="last1" size="35" style="width: 155px" /></td>
  <td style="width: 66px">
<select name="gender1" class="dropdownbox" id="series id15"style="height: 23px; width: 70px">
<option></option>
<option>M</option>
<option>F</option>
</select></td>
  <td style="width: 224px">
  <input type="date" name="dob1" size="35" onchange = "repeat()" style="width: 155px; height: 27px;" /></td>
  <td style="width: 74px">
<input type="text" name="class1" size="35" style="width: 155px" /></td>
  <td style="width: 104px">
<select name="events1" class="dropdownbox" id="series id"style="height: 23px; width: 104px">
<option></option>
</select> </td>
  <td style="width: 72px">
<select name="events1B" class="dropdownbox" id="series id16"style="height: 23px; width: 104px">
<option></option>
</select> </td>
 </tr>
</table>

No matter what date I put in the field is always populated with "Class 2"

score 1 · Answer 1 · answered Mar 24 '18 at 20:00

You just need to parse the dates first as you try to compare with strings, this works just fine for example:

var first = new Date("2018-03-01");
var second = new Date("2018-03-15");
var third = new Date("2018-03-30");

console.log(second > first && second < third); // True
// More examples
console.log(first > second); // False
console.log(first < third); // True

Date can even read that ridiculous imperial notation:

console.log(new Date('09/01/2005'))
console.log(new Date('08/31/2006'))

Beware of time zones and all that, though.

pkuzhel · Answer 2 · 2018-03-24T20:00:00.170

0

This seems to be a duplicate of: Compare two dates with JavaScript

Your current comparison will just compare strings, which is not a reliable way to compare dates.

Instead, you should use the native Date object or try using a library like momentjs for dates.

Date comparison with MomentJS: Moment js date time comparison

edited Mar 24 '18 at 20:00

answered Mar 24 '18 at 19:53

pkuzhel

317
2
5

Not true, you can compare dates via comparison operators. – H.B. Mar 24 '18 at 19:57
You're right, I should be clear that JavaScript doesn't know how to compare dates when they are represented as strings. – pkuzhel Mar 24 '18 at 19:58

score 0 · Accepted Answer · answered Mar 24 '18 at 20:09

In your code just put your condition inside new Date(). Means replace

if(document.myform.dob1.value <='09/01/2005' && document.myform.dob1.value >='08/31/2006')

with

if(new Date(document.myform.dob1.value) >= new Date('2005-09-01') && new Date(document.myform.dob1.value) <= new Date('2006-08-31'))

function repeat()
{
 if(new Date(document.myform.dob1.value) >= new Date('2005-09-01') && new Date(document.myform.dob1.value) <= new Date('2006-08-31'))
  console.log(1);
 else
  console.log(2);
}

<body>
<form name="myform" method="post" action="insert_entries.php">

<table style="width: 139%" align="center">
 <tr>
  <td class="style2" style="width: 166px"><strong>FIRST NAME</strong></td>
  <td class="style2" style="width: 161px"><strong>LAST NAME</strong></td>
  <td class="style2" style="width: 66px"><strong>GENDER</strong></td>
  <td class="style2" style="width: 224px"><strong>DOB</strong></td>
  <td class="style2" style="width: 74px"><strong>CLASS</strong></td>
  <td class="style2" style="width: 104px"><strong>EVENT 1</strong></td>
  <td class="style2" style="width: 104px"><strong>EVENT 2</strong></td>
 </tr>
 <tr>
  <td style="width: 166px">
<input type="text" name="first1" size="35" style="width: 155px" /></td>
  <td style="width: 161px">
<input type="text" name="last1" size="35" style="width: 155px" /></td>
  <td style="width: 66px">
<select name="gender1" class="dropdownbox" id="series id15"style="height: 23px; width: 70px">
<option></option>
<option>M</option>
<option>F</option>
</select></td>
  <td style="width: 224px">
  <input type="date" name="dob1" size="35" onchange = "repeat()" style="width: 155px; height: 27px;" /></td>
  <td style="width: 74px">
<input type="text" name="class1" size="35" style="width: 155px" /></td>
  <td style="width: 104px">
<select name="events1" class="dropdownbox" id="series id"style="height: 23px; width: 104px">
<option></option>
</select> </td>
  <td style="width: 72px">
<select name="events1B" class="dropdownbox" id="series id16"style="height: 23px; width: 104px">
<option></option>
</select> </td>
 </tr>
</table>

javascript function check if date is between

3 Answers3