SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Not quite giving the dates correctly

    I put a thread out previously and got some responses. I found a help area that gave me what I wanted - kind of.

    If the code below is run and NO DATE is put in, the function runs as I expect. However, if there is a date in the DATE box, then, well, the number of days does not change! That seems weird....

    I would like this to put the proper number of days via the selected month if it can. Just not sure what is really going on and/or where the issue could be. Looks like this should work like I want, but.... well, let the experts beat me and it up!

    Oh, I really don't have a lick of Javascript experience and am doing this for learning more than anything

    Here is my code:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      
      
      </head>
      <body>
     <form name="myform"><fieldset>
        <legend>Date Selection</legend>
        <label for="year">Year: </label><select name="eventYear" id="eventYear" size="1">
        <option value=" " selected="selected"> </option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        </select>
        <label for="month">Month: </label>
        <select name="eventMonth" id="eventMonth" size="1">
        <option value=" " selected="selected"> </option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
         
        </select>
         
        <label for="day">Day: </label><select name="eventStartDate" id="eventStartDate" size="1">
        <option value=" " selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">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>
        </fieldset>
      </form> 
    <script type="text/javascript"> 
      function daysInMonth(month,year) 
      {
        var dd = new Date(year, month, 0);
        return dd.getDate();
      } 
      function setDayDrop(dyear, dmonth, dday)
      {
        var year = dyear.options[dyear.selectedIndex].value;
        var month = dmonth.options[dmonth.selectedIndex].value;
        var day = dday.options[dday.selectedIndex].value;
        if (day == ' ')
        {
        var days = (year == ' ' || month == ' ') ? 31 : daysInMonth(month,year);
        dday.options.length = 0;
        dday.options[dday.options.length] = new Option(' ',' ');
        for (var i = 1; i <= days; i++) 
          dday.options[dday.options.length] = new Option(i,i);
        }
      }
     
      function setDay() 
      {
        var year = document.getElementById('eventYear');
        var month = document.getElementById('eventMonth');
        var day = document.getElementById('eventStartDate');
        setDayDrop(year,month,day);
      }
      document.getElementById('eventYear').onchange = setDay;
      document.getElementById('eventMonth').onchange = setDay;
    </script>
    
      </body>
    </html>
    Last edited by SpacePhoenix; Feb 14, 2012 at 16:46. Reason: placed html tags around code

  2. #2
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Even i tried to implement this functionality in my code. But it didn't worked. please give me any ideas.

    Thanks,
    Vidya Gupta.



    Quote Originally Posted by fredep57 View Post
    I put a thread out previously and got some responses. I found a help area that gave me what I wanted - kind of.

    If the code below is run and NO DATE is put in, the function runs as I expect. However, if there is a date in the DATE box, then, well, the number of days does not change! That seems weird....

    I would like this to put the proper number of days via the selected month if it can. Just not sure what is really going on and/or where the issue could be. Looks like this should work like I want, but.... well, let the experts beat me and it up!

    Oh, I really don't have a lick of Javascript experience and am doing this for learning more than anything

    Here is my code:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      
      
      </head>
      <body>
     <form name="myform"><fieldset>
        <legend>Date Selection</legend>
        <label for="year">Year: </label><select name="eventYear" id="eventYear" size="1">
        <option value=" " selected="selected"> </option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        </select>
        <label for="month">Month: </label>
        <select name="eventMonth" id="eventMonth" size="1">
        <option value=" " selected="selected"> </option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
         
        </select>
         
        <label for="day">Day: </label><select name="eventStartDate" id="eventStartDate" size="1">
        <option value=" " selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">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>
        </fieldset>
      </form> 
    <script type="text/javascript"> 
      function daysInMonth(month,year) 
      {
        var dd = new Date(year, month, 0);
        return dd.getDate();
      } 
      function setDayDrop(dyear, dmonth, dday)
      {
        var year = dyear.options[dyear.selectedIndex].value;
        var month = dmonth.options[dmonth.selectedIndex].value;
        var day = dday.options[dday.selectedIndex].value;
        if (day == ' ')
        {
        var days = (year == ' ' || month == ' ') ? 31 : daysInMonth(month,year);
        dday.options.length = 0;
        dday.options[dday.options.length] = new Option(' ',' ');
        for (var i = 1; i <= days; i++) 
          dday.options[dday.options.length] = new Option(i,i);
        }
      }
     
      function setDay() 
      {
        var year = document.getElementById('eventYear');
        var month = document.getElementById('eventMonth');
        var day = document.getElementById('eventStartDate');
        setDayDrop(year,month,day);
      }
      document.getElementById('eventYear').onchange = setDay;
      document.getElementById('eventMonth').onchange = setDay;
    </script>
    
      </body>
    </html>

  3. #3
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fredep57 View Post
    ...
    If the code below is run and NO DATE is put in, the function runs as I expect. However, if there is a date in the DATE box, then, well, the number of days does not change! That seems weird....

    ...
    It should not seems weird since that was what is in your code which said change only if day is NO DATE. Remove that and it should be ok.

    Update the function to this and see if this is what you are looking for:

    HTML Code:
      function setDayDrop(dyear, dmonth, dday)
      {
    
        var year = dyear.options[dyear.selectedIndex].value;
        var month = dmonth.options[dmonth.selectedIndex].value;
        var day = dday.options[dday.selectedIndex].value;
    
        var days = (year == ' ' || month == ' ') ? 31 : daysInMonth(month,year);
        if(day>days) day=days;
        dday.options.length = 0;
        dday.options[dday.options.length] = new Option(day,day);
        for (var i = 1; i <= days; i++) 
          dday.options[dday.options.length] = new Option(i,i);
    
      }

  4. #4
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ya.. i changed the code with the above code.. Even though it didn't worked..

  5. #5
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It did work for me with the changes. Click here to test it yourself and see.

    Here is my complete listing of the code:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
       <meta http-equiv="content-type" content="text/html; charset=windows-1250">
       <meta name="generator" content="PSPad editor, www.pspad.com">
       <title>Date</title>
    </head>
    <body>
    
    <form name="myform"><fieldset>
    
       <legend>Date Selection</legend>
       <label for="year">Year: </label><select name="eventYear" id="eventYear" size="1">
          <option value=" " selected="selected"> </option>
          <option value="2000">2000</option>
          <option value="2001">2001</option>
          <option value="2002">2002</option>
       </select>
       
       <label for="month">Month: </label>
       <select name="eventMonth" id="eventMonth" size="1">
          <option value=" " selected="selected"> </option>
          <option value="1">January</option>
          <option value="2">February</option>
          <option value="3">March</option>
          <option value="4">April</option>
          <option value="5">May</option>
          <option value="6">June</option>
          <option value="7">July</option>
          <option value="8">August</option>
          <option value="9">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
       </select>
         
       <label for="day">Day: </label><select name="eventStartDate" id="eventStartDate" size="1">
          <option value=" " selected="selected"> </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">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>
       </fieldset>
    </form>
    
    <script type="text/javascript"> 
    
       function daysInMonth(month,year) 
       {
    	   var dd = new Date(year, month, 0);
    	   return dd.getDate();
       } 
    
       function setDayDrop(dyear, dmonth, dday)
       {
    	   var year = dyear.options[dyear.selectedIndex].value;
    	   var month = dmonth.options[dmonth.selectedIndex].value;
    	   var day = dday.options[dday.selectedIndex].value;
    
    	   var days = (year == ' ' || month == ' ') ? 31 : daysInMonth(month,year);
    	   dday.options.length = 0;
    	   if(day>days) day=days;
    	   dday.options[dday.options.length] = new Option(day,day);
    
    	   for (var i = 1; i <= days; i++) 
    		   dday.options[dday.options.length] = new Option(i,i);
    
       }
     
       function setDay() 
       {
    	   var year = document.getElementById('eventYear');
    	   var month = document.getElementById('eventMonth');
    	   var day = document.getElementById('eventStartDate');
    	   setDayDrop(year,month,day);
       }
      
       document.getElementById('eventYear').onchange = setDay;
       document.getElementById('eventMonth').onchange = setDay;
    
    </script>
    
    </body>
    </html>


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
  •