SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dont allow user to select date that falls in the future

    Hi,

    I have a dropdown list lf dates like this:
    PHP Code:
        <select name="day">
                <
    option selected>day</option>
                <
    option value="01">01</option>
                <
    option value="02">02</option>
                <
    option value="03">03</option>
                <
    option value="04">04</option>
                <
    option value="05">05</option>
                <
    option value="06">06</option>
                <
    option value="07">07</option>
                <
    option value="08">08</option>
                <
    option value="09">09</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="month">
                <
    option selected>month</option>
                <
    option value="01">January</option>
                <
    option value="02">February</option>
                <
    option value="03">March</option>
                <
    option value="04">April</option>
                <
    option value="05">May</option>
                <
    option value="06">June</option>
                <
    option value="07">July</option>
                <
    option value="08">August</option>
                <
    option value="09">September</option>
                <
    option value="10">October</option>
                <
    option value="11">November</option>
                <
    option value="12">December</option>
              </
    select>
              <
    select name="year">
                <
    option selected>year</option>
                <
    option value="2003">2003</option>
                <
    option value="2002">2002</option>
                <
    option value="2001">2001</option>
                <!--<
    option value="2000">2000</option>-->
              </
    select
    I need to do 2 things -

    1) Stop someone from selecting a date that is in the future
    2) Make todays date automatically be selected.

    Can someone please help me out with these problems?

    Thanks,
    Martin

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If you want today's date to be selected, you may want to perform that on the server. Are you using PHP or ASP?

  3. #3
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    forgot to mention - this has to be done in javascript if its possible because the server doesnt have ASP or PHP installed (long story but the end line is, I cant use a server side language for this)

  4. #4
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can anyone help me with this?

  5. #5
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll try to post some code later on how to set the date, to the current date. Regarding your second task, when do you want to validate it? When they leave the page? I wouldn't try to do it while they're making their selections.

  6. #6
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Makeda,

    thanks for your help - it will be much appreciated!

    I want to validate it when they click submit, not as they go through the date selections.

    Thanks,
    Martin

  7. #7
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, here is some code to set your date. My code is written as though the name of your form is "frmTest":

    Code:
    <script type="text/javascript" language="javascript">
    
    function setDate() {
    	var oDate;
    	var sDay;
    	var sMonth;
    	var sYear;
    
    	oDate = new Date();
    	sDay = LengthOfTwo(oDate.getDate());
    
    	//month is 0 based
    	sMonth = LengthOfTwo((oDate.getMonth() + 1));
    	sYear = oDate.getFullYear();
    
    	document.frmTest.day.value = sDay;
    	document.frmTest.month.value = sMonth;
    	document.frmTest.year.value = sYear;
    }
    
    function LengthOfTwo(iNum) {
    	 var sReturnVal;
    	 parseInt(iNum) < 10 ? sReturnVal = "0" + iNum : sReturnVal = iNum;
    	 return sReturnVal;
    
    }
    </script>
    
    <body onLoad="setDate()">

  8. #8
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent! That worked perfectly

    Much appreciated.

  9. #9
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the rest. One change, however, we have moved the date variables out of the onLoad function and made them global. This way we only need to set them once.

    Code:
    <script type="text/javascript" language="javascript">
    
    var sDay;
    var sMonth;
    var sYear;
    
    function setDate() {
    	var oDate;
    	
    	oDate = new Date();
    	sDay = LengthOfTwo(oDate.getDate());
    
    	//month is 0 based
    	sMonth = LengthOfTwo((oDate.getMonth() + 1));
    	sYear = oDate.getFullYear();
    
    	document.frmTest.day.value = sDay;
    	document.frmTest.month.value = sMonth;
    	document.frmTest.year.value = sYear;
    }
    
    function LengthOfTwo(iNum) {
    	 var sReturnVal;
    	 parseInt(iNum) < 10 ? sReturnVal = "0" + iNum : sReturnVal = iNum;
    	 return sReturnVal;
    
    }
    
    function CheckIt() {
    
    	var sInputDay;
    	var sInputMonth;
    	var sInputYear;
    	var bValid;
    
    
    	bValid = true;
    	sInputDay = parseInt(document.frmTest.day.value);
    	sInputMonth = parseInt(document.frmTest.month.value);
    	sInputYear = parseInt(document.frmTest.year.value);
    
    	//start with the year
    	if(sInputYear > parseInt(sYear)) {
    		bValid = false;
    	}
    	if(sInputMonth > parseInt(sMonth)) {
    		bValid = false;
    	}
    	if(sInputDay > parseInt(sDay)) {
    		bValid = false;
    	}
    
    	bValid ? alert("Date is Valid") : alert("Date is Invalid");
    	return bValid;
    	
    }
    </script>
    
    <body onLoad="setDate()">
    <input type="button" name="btnCheck" value="checkIt" onClick="CheckIt()" />

  10. #10
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am having a slight problem with this one....

    It works fine in saying if the date i valid or invalid....how do i get it to only do the alert to say "Date is Invalid" and if it is valid, it just carries out what is in the form action

    thanks,
    Martin

  11. #11
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lots of ways to do it. One way would be like so:

    Code:
    if(bValid) {
      frmTest.submit();
    } 
    else {
      alert("Date is Invalid");
      return false;
    }

  12. #12
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, could also just leave the original code and change your event handler and button type. Do this:

    <form name="frmTest" action="http://www.cnn.com" onSubmit="return CheckIt()">
    <input type="submit" name="subSub" value="submit form">

  13. #13
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, that worked fine

  14. #14
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem.

  15. #15
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maketa,

    I am having a slight problem with this.

    When I select a date that is in the past but where the day and month date would be in the future if I had selected 2003, I am still getting the "You cant select a date in the past"

    ie: wheh I select 12/12/2003 I get the alert (which is what it is supposed to do)
    when I select 12/12/2002 I still get the eror even though this is in the past.

    Any ideas?

    Thanks,
    Martin

  16. #16
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    D'oh. Logic error.

    Code:
    function CheckIt() {
    
    	var sInputDay;
    	var sInputMonth;
    	var sInputYear;
    	var bValid;
    
    
    	bValid = true;
    	sInputDay = parseInt(document.frmTest.day.value);
    	sInputMonth = parseInt(document.frmTest.month.value);
    	sInputYear = parseInt(document.frmTest.year.value);
    
    	//start with the year
    	if(sInputYear > parseInt(sYear)) {
    		bValid = false;
    	}
    	if(sInputYear == parseInt(sYear)) {
              if(sInputMonth > parseInt(sMonth)) {
    		bValid = false;
    	  }
    	  if(sInputDay > parseInt(sDay)) {
    		bValid = false;
    	  }
            }
    	bValid ? alert("Date is Valid") : alert("Date is Invalid");
    	return bValid;
    	
    }
    I think this will work, right?

  17. #17
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that worked,

    thanks again

  18. #18
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    sorry - noticed another bug with this.

    if I select a day that is greater than the number of the current day and the month is in the past and it is the current year, it gives the invalid date alert.

    ie: Today is Feb 19th 2003, if I select Jan 21 2003 I get the invalid date error.

    Thanks,
    Martin

  19. #19
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll let you figure this one out. Take a look at how we fixed the last bug. The solution for this one is the same kind of fix. Think about the logic behind it. You can do it!!

  20. #20
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I am not too sure about this.

    Firstly, your code does the following, right?

    - sets day, month & year variables
    - assigns the value of what was entered in the form to these values
    - if input year is greater than current year - false
    - if input year is = to current year check month and day
    - if month is greater than current month - false
    - if day is greater than current day - false

    I understand your code but i cant think of hope to validate this last part....

  21. #21
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    -If the year selected is greater than the current year, validation fails.
    
    -Otherwise, year selected is valid, so check the the month
        
        -If the month selected is greater than the current month, the validation fails.
      
        -Otherwise, month selected is valid, so check the day
         
            -If the day selected is greater than the current day, the validation fails.
    
            -Otherwise, day selected is valid.
    Sometimes it takes a little while to flush out the logic.

  22. #22
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I understand the logic now.


    Why is this line needed?

    Code:
    if(sInputYear == parseInt(sYear))
    Is that saying if year from form is equal to current year?

  23. #23
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes.

  24. #24
    SitePoint Addict mcrumlish's Avatar
    Join Date
    Jan 2002
    Posts
    384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I got it working.

    Code:
    function CheckIt() {
    
    	var sInputDay;
    	var sInputMonth;
    	var sInputYear;
    	var bValid;
    
    
    	bValid = true;
    	sInputDay = parseInt(document.frmTest.day.value);
    	sInputMonth = parseInt(document.frmTest.month.value);
    	sInputYear = parseInt(document.frmTest.year.value);
    
    	//start with the year
    	if(sInputYear > parseInt(sYear)) {
    		bValid = false;
    	}
    	if(sInputYear == parseInt(sYear)) {
              if(sInputMonth > parseInt(sMonth)) {
    		bValid = false;
    	  }
    	  if(sInputMonth == parseInt(sMonth)) {
    	  if(sInputDay > parseInt(sDay)) {
    		bValid = false;
    	  }
    	  }
          }
    	if(bValid) {
        frmTest.submit();
    	} 
    	else {
    	alert("You can't select a date in the future!");
    	return false;
    	}
    }
    It was pretty simple once I understood the logic and thought about it.

    Thanks,
    Martin

  25. #25
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Way to go!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •