CODEWITHSUNDEEP
javascript
Cathy Ann
Cathy Ann

Reputation: 3

javascript function check if date is between

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"

Upvotes: 0

Views: 49

Answers (3)

yajiv
yajiv

Reputation: 2941

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>

Upvotes: 0

brunnerh
brunnerh

Reputation: 184524

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.

Upvotes: 1

pkuzhel
pkuzhel

Reputation: 337

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

Upvotes: 0

Related Questions