JavaScript Validation - Disallow past dates with dropdown boxes for MM DD and YYYY

Question

SethHall 0 Newbie Poster

13 Years Ago

Hey guys, I've been trying to do this since yesterday with no luck. I've tried stackoverflow, DIC and this is my last chance. I'm using drop down boxes to have a user select a ship date. I don't want them to be able to choose a date in the past however. Below is some code a guy at DIC sent me which doesn't have many changes from my original one but he said it was working and I havent been able to get it working. So if someone could shin some light on this, what am I doing wrong?

<html>
<head>
<script type="text/javascript">
function date_check()
{
	var trans_date = document.form1.selectmonth.options[document.form1.selectmonth.selectedIndex].value + "-" + document.form1.selectday.options[document.form1.selectday.selectedIndex].value + "-" + document.form1.selectyear[document.form1.selectyear.selectedIndex].value;
	var d = new Date();
	var today = (d.getMonth()+1) + "-" + d.getDate() + "-" + d.getFullYear();
	if(new Date(trans_date) < new Date(today)){
		alert("The shipping date cannot be in the past, please enter a valid shipping date.");
		return false;
		}
		

}

</script>
</head>
<body>
<form action="" method="post" name="form1" onsubmit="if (date_check()==false) return false; else return true;">
<label>Shipping Date</label>
<select name="selectmonth">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="selectday">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="selectyear">
<option value="11">2011</option>
<option value="12">2012</option>
<option value="13">2013</option>
<option value="14">2014</option>
<option value="15">2015</option>
</select>
<input type="submit" name="Submit" value="Submit"></input>
</form>
</body>
</html>

EDIT: This is my old function that I made and was trying:

<script type="text/javascript">
function date_check()
{
	var trans_date = document.form1.selectmonth.value + "-" + document.form1.selectday.value + "-" + document.form1.selectyear.value;
	var d = new Date();
	var today = (d.getMonth()+1) + "-" + d.getDate() + "-" + d.getFullYear();
	if(new Date(trans_date) < new Date(today)){
		window.alert("The shipping date cannot be in the past, please enter a valid shipping date.");
		return false;

}
</script>

javascript

Edited 13 Years Ago by SethHall because: Added old code.

2 Contributors
7 Replies
1K Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by SethHall

MartinRinehart 0 Junior Poster in Training

13 Years Ago

What are your goals here? To make it easy for the user? To make it easy for the shipping department?

What is the allowable range? For example, could a month of October or less still be valid today? How far in the future should be go?

Are dropdowns the best option? Could you pop up a calendar with the innapropriate dates grayed?

As an aside,

if ( condition ) {
    return true;
} else {
    return false;
}

// above is the long way to say this:

return condition;

You'll have to look at 'if (cond == false)' ... as a variant. In general, changing the condition around to check for 'true' is a good idea. (Replace '(x < 2)' with '(x >= 2)', for example.)

MartinRinehart 0 Junior Poster in Training

13 Years Ago

That being the case, fall back on your original attempt. Get the date through dropdowns and validate the result. Was your original code not working? Why?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

SethHall 0 Newbie Poster · Answer 1 · 2011-11-03T02:02:25+00:00

This is for a mobile quote website. The reason that we can't have dates in the past be chosen is because it's pointless. You're not going to ship something in the past. Ensuring the user chooses a future date ensures they get the most up to date price quotes and the company reps don't have to make outbound calls just to get the correct date.

I dont see how the allowable range is valid since the user can choose any date they would like in the future. Regardless if it's 20 years down the road they could still chose it. As in my form however I've only got it to 2015. I just need to try to make sure that a date in the past even if a day is chosen.

I'm no good at JavaScript as web isn't my forte so I'm not following 100% on your post.

SethHall 0 Newbie Poster · Answer 2 · 2011-11-03T02:16:41+00:00

No it's not working and I dont know why, which would be why I came here lol. It just doesnt appear to be capturing the information from the drop down boxes. I'm not sure why as everything I've tried to my knowledge should be returning the selected values.

SethHall 0 Newbie Poster · Answer 3 · 2011-11-03T05:12:11+00:00

Ok so I think I got it to get return the date from the dropdown boxes:

function check()
{
  var selecteddate = document.form1.selectmonth.value + "-" + document.form1.selectday.value + "-" + document.form1.selectyear.value;
  var d = new Date();
  var today = (d.getMonth()+1) + "-" + d.getDate()+ "-" + d.getFullYear();
  //When I do an alert(selecteddate); it pops up with the correct month, date and year formatted correctly. As does an alert(today);
  //with todays date formatted correctly
  alert(selecteddate);
  alert(today);
  //When I put it together with the if statement, even if the selected date is in the past or future, I get the alert for past date
  if(new Date(selecteddate) < new Date(today))
    {
    alert("Past date is not valid");
    return false;
    }
}

So I have it now getting the drop down values each time. I just need help with the if statement. Whatever I do it just keeps giving me the alert saying the shipping date is in the past even if it isnt. Below is my if statement:

MartinRinehart 0 Junior Poster in Training · Answer 4 · 2011-11-03T15:44:37+00:00

No need for 'today'. 'var d = new Date()' is today's date and time.

Without all the details, it looks like the '+1' month is an issue. 'today' is today's date, in December. Try living with months 0 thru 11.

SethHall 0 Newbie Poster · Answer 5 · 2011-11-03T20:06:23+00:00

How can it be an issue when it returns the correct dates to me? Upon further testing it works just fine in Chrome, in FF I get all three alerts in IE and I get the alert(selecteddate) and alert(today) so it's looking like cross-browser compatibility problem? Any ideas to get it woring across all of them? Like I said it works fine in Chrome so the logic seems right to me.