Solved

Month Picker

Posted on 2004-04-18
6
4,720 Views
Last Modified: 2007-11-27
How would i wirte a calendar that looks just like a normal date picker calander but instead of days you pick the month.  So i have teh year at the top (which u can scroll) and the months undernether and you pick teh month and it returns it to the text box
0
Comment
Question by:Joana
  • 3
  • 3
6 Comments
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10862582
I quickly whipped up a month picker - I didn't include the year selection because there is 12 months in every year.

So heres my effort...

TheForm.htm ==================================================================================================================
<html>
<head>
<title>The Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">

<form name="Month" method="post" action="TheForm.htm">
      <input type="text" name="f_0" value="" maxlength="2" size="3">
      [<a href="javascript: void(0)" onClick="window.open('Month.htm','Month','width=250,height=105'); return false">Month</a>]
</form>
</body>
</html>
===========================================================================================================================

Month.htm ====================================================================================================================
<html>
<head>
<title>Month</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function PostBack(Month)
      {
            window.opener.document.Month.f_0.value=Month;
            window.close()
      }
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="5" topmargin="5">
<table width="240" cellspacing="0" cellpadding="1" border="1">
      <tr>
            <td colspan="4" align="center">Select Month</td>
      </tr>
      <tr>
            <td width="40" height="20" align="center"><a href="javascript:void(0)" onClick="PostBack(1)">1</a></td>
            <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(2)">2</a></td>
            <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(3)">3</a></td>
            <td width="40" height="20" align="center"><a href="javascript:void(0)" onClick="PostBack(4)">4</a></td>
      </tr>
      <tr>
            <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(5)">5</a></td>
            <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(6)">6</a></td>
            <td width="40" height="20" align="center"><a href="javascript:void(0)" onClick="PostBack(7)">7</a></td>
            <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(8)">8</a></td>
      </tr>
      <tr>
            <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(9)">9</a></td>
            <td width="40" height="20" align="center"><a href="javascript:void(0)" onClick="PostBack(10)">10</a></td>
            <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(11)">11</a></td>
            <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(12)">12</a></td>
      </tr>
</table>
</body>
</html>
===========================================================================================================================
0
 

Author Comment

by:Joana
ID: 10863585
hiya
that is almost exactly what i want but i still need the textbox at teh top that scrolls years as teh user has to select year and month
0
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10863643
Is the year passed back to the main form?
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

Author Comment

by:Joana
ID: 10863660
yip so the text box would have 4/2004 :-)
0
 
LVL 6

Accepted Solution

by:
Lord_McFly earned 220 total points
ID: 10864107
Ok - my slightly updates version - hope its ok - the year is in a listbox (it goes back 5 year and forward 5 years)...

TheForm.htm ==================================================================================================================
<html>
<head>
<title>The Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">

<form name="Month" method="post" action="TheForm.htm">
      <input type="text" name="f_0" value="" maxlength="2" size="5">
      [<a href="javascript: void(0)" onClick="window.open('Month.htm','Month','width=250,height=130'); return false">Month</a>]
</form>
</body>
</html>
===========================================================================================================================

Month.htm ====================================================================================================================
<html>
<head>
<title>Month</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function PostBack(Month)
      {
            window.opener.document.Month.f_0.value=Month + "/" + document.Selection.YearList.options[document.Selection.YearList.selectedIndex].value;
            window.close()
      }
      
function FillYears()
      {
            var i
            var date = new Date()
            
            for (i=-5; i<=5; i++)
                  {
                        document.Selection.YearList.options[i+5] = new Option();
                        document.Selection.YearList.options[i+5].value = date.getFullYear() + i;
                        document.Selection.YearList.options[i+5].text = date.getFullYear() + i;
                        
                        if(i==5) document.Selection.YearList.selectedIndex = i
                  }
      }
//-->
</script>
</head>
<body onLoad="FillYears()" bgcolor="#FFFFFF" leftmargin="5" topmargin="5">
<table width="240" cellspacing="0" cellpadding="1" border="1">
      <form name="Selection" method="post" action="">
            <tr>
                  <td colspan="4" align="center">Y e a r / M o n t h</td>
            </tr>
            <tr>
                  <td colspan="4" align="center">
                        <select name="YearList">
                        </select>
                  </td>
            </tr>
            <tr>
                  <td width="40" height="20" align="center"><a href="javascript:void(0)" onClick="PostBack(1)">1</a></td>
                  <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(2)">2</a></td>
                  <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(3)">3</a></td>
                  <td width="40" height="20" align="center"><a href="javascript:void(0)" onClick="PostBack(4)">4</a></td>
            </tr>
            <tr>
                  <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(5)">5</a></td>
                  <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(6)">6</a></td>
                  <td width="40" height="20" align="center"><a href="javascript:void(0)" onClick="PostBack(7)">7</a></td>
                  <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(8)">8</a></td>
            </tr>
            <tr>
                  <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(9)">9</a></td>
                  <td width="40" height="20" align="center"><a href="javascript:void(0)" onClick="PostBack(10)">10</a></td>
                  <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(11)">11</a></td>
                  <td width="40" align="center"><a href="javascript:void(0)" onClick="PostBack(12)">12</a></td>
            </tr>
      </form>
</table>
</body>
</html>
===========================================================================================================================
0
 

Author Comment

by:Joana
ID: 10864259
Perfect :-)
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now