How to create a drop down date menu within a login page

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • heenakausar
    New Member
    • Mar 2008
    • 9
    #1

    How to create a drop down date menu within a login page

    I want to create a drop down menu of month:, day:, and year. The difficulty with this one is that i dont know whether to make this a dynamic menu list - after all - the number of days within the day selection list depends on the month entered and also the year (in the case of a leap year)

    So, can any one suggest me with this or can give a sample code..

    Thanx
    Tags: None
    • abhishekbrave
      New Member
      • Dec 2007
      • 79
      #2
      Originally posted by heenakausar
      I want to create a drop down menu of month:, day:, and year. The difficulty with this one is that i dont know whether to make this a dynamic menu list - after all - the number of days within the day selection list depends on the month entered and also the year (in the case of a leap year)

      So, can any one suggest me with this or can give a sample code..

      Thanx
      hi check out the code below... you will get drop down box with current month and year and the days for the particular month.

      I have used 2 functions in the code .One for checking the leap year and other for populating the drop down box on body load.

      Read the functions in the code and write a new function if you want to change day if users changes month or year.

      And move this post to javascript forum

      [html]
      <html>

      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title>New Page 1</title>
      </head>


      <script>
      //to check leap year
      function checkleapyear(d atea)
      {
      datea = parseInt(datea) ;

      if(datea%4 == 0)
      {
      if(datea%100 != 0)
      {
      return true;
      }
      else
      {
      if(datea%400 == 0)
      return true;
      else
      return false;
      }
      }
      return false;
      }
      //to populate drop drow boxex with the current month and date
      function populateYearSel ect()
      {
      d = new Date();
      curr_year = d.getFullYear() ;
      curr_month=d.ge tMonth();

      document.getEle mentById('month ').options[curr_month].selected=true;
      for(i = 0; i < 3; i++)
      {
      document.getEle mentById('year' ).options[i] = new Option(curr_yea r-i,curr_year-i);
      }


      if(curr_month== 0 || curr_month==2 ||curr_month==4 || curr_month==6 || curr_month==7 || curr_month==9 || curr_month===11 )
      {
      for(i=0;i<=30;i ++)

      document.getEle mentById('day') .options[i] = new Option(i+1,i+1) ;

      }

      else if(curr_month== 3 || curr_month==5 ||curr_month==8 || curr_month==10)
      {
      for(i=0;i<=29;i ++)

      document.getEle mentById('day') .options[i] = new Option(i+1,i+1) ;


      }

      if(curr_month== 1)
      {
      var year=document.g etElementById(' year').value;


      if(checkleapyea r(year))
      { for(i=0;i<=28;i ++)
      document.getEle mentById('day') .options[i] = new Option(i+1,i+1) ; }
      else
      { for(i=0;i<=27;i ++)
      document.getEle mentById('day') .options[i] = new Option(i+1,i+1) ;}

      }

      }



      </script>

      <body onLoad="populat eYearSelect()">


      <select name="year" id="year" >
      </select>

      <select name="month" id="month">
      <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="day" id="day">
      </select>

      </body>



      </html>

      [/html]

        Comment

        • abhishekbrave
          New Member
          • Dec 2007
          • 79
          #3
          Originally posted by heenakausar
          I want to create a drop down menu of month:, day:, and year. The difficulty with this one is that i dont know whether to make this a dynamic menu list - after all - the number of days within the day selection list depends on the month entered and also the year (in the case of a leap year)

          So, can any one suggest me with this or can give a sample code..

          Thanx
          The code below will give you drop down boxes populated with current month and year.
          If you want to change the day if user change month or year then write one more function using the same functions that i have used below.

          [html]
          <html>

          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
          <title>New Page 1</title>
          </head>


          <script>
          //to check leap year
          function checkleapyear(d atea)
          {
          datea = parseInt(datea) ;

          if(datea%4 == 0)
          {
          if(datea%100 != 0)
          {
          return true;
          }
          else
          {
          if(datea%400 == 0)
          return true;
          else
          return false;
          }
          }
          return false;
          }
          //to populate drop drow boxex with the current month and date
          function populateYearSel ect()
          {
          d = new Date();
          curr_year = d.getFullYear() ;
          curr_month=d.ge tMonth();

          document.getEle mentById('month ').options[curr_month].selected=true;
          for(i = 0; i < 3; i++)
          {
          document.getEle mentById('year' ).options[i] = new Option(curr_yea r-i,curr_year-i);
          }


          if(curr_month== 0 || curr_month==2 ||curr_month==4 || curr_month==6 || curr_month==7 || curr_month==9 || curr_month===11 )
          {
          for(i=0;i<=30;i ++)

          document.getEle mentById('day') .options[i] = new Option(i+1,i+1) ;

          }

          else if(curr_month== 3 || curr_month==5 ||curr_month==8 || curr_month==10)
          {
          for(i=0;i<=29;i ++)

          document.getEle mentById('day') .options[i] = new Option(i+1,i+1) ;


          }

          if(curr_month== 1)
          {
          var year=document.g etElementById(' year').value;


          if(checkleapyea r(year))
          { for(i=0;i<=28;i ++)
          document.getEle mentById('day') .options[i] = new Option(i+1,i+1) ; }
          else
          { for(i=0;i<=27;i ++)
          document.getEle mentById('day') .options[i] = new Option(i+1,i+1) ;}

          }

          }



          </script>

          <body onLoad="populat eYearSelect()">


          <select name="year" id="year" >
          </select>

          <select name="month" id="month">
          <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="day" id="day">
          </select>

          </body>



          </html>

          [/html]

            Comment

            Previous template Next
            Working...