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"

brunnerh · Accepted Answer · 2018-03-24 20:00:49Z

1

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.

answered Mar 24, 2018 at 20:00

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yajiv · Accepted Answer · 2018-03-24 20:09:18Z

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>

pkuzhel · Accepted Answer · 2018-03-24 20:00:00Z

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, 2018 at 20:00

answered Mar 24, 2018 at 19:53

pkuzhel

3372 silver badges6 bronze badges

2 Comments

brunnerh Over a year ago

Not true, you can compare dates via comparison operators.

pkuzhel Over a year ago

You're right, I should be clear that JavaScript doesn't know how to compare dates when they are represented as strings.

Collectives™ on Stack Overflow

javascript function check if date is between

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related