Ejemplos en Javascript

Calendario con formulario

Un calendario, mes por mes, construido con botones de formulario

<HTML>
<HEAD>

<TITLE>Ejemplos Javascript: ejemplo prÃ?Æ?Ã?¡ctico </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--

function displayCalendar(init) {       
   var i;
   var now = new Date();
        var nowYear = now.getYear() - 95;
   var nowMonth = now.getMonth();
   var nowDay   = now.getDate();

   // on open of document
   if (init==1)  {
        document.calControl.month.selectedIndex = nowMonth;
        document.calControl.year.selectedIndex = nowYear;
   }
        var month=document.calControl.month.selectedIndex
        var year=document.calControl.year.selectedIndex+1995

        var days=getDaysInMonth(month+1,year);

        var firstOfMonth = new Date (year, month, 1);

        var startingPos=firstOfMonth.getDay()+7;

        days+=startingPos;

   // label days of week
   i=0;
        document.calButtons.elements[i++].value = " S ";
   document.calButtons.elements[i++].value = " M ";
   document.calButtons.elements[i++].value = " T ";
   document.calButtons.elements[i++].value = " W ";
   document.calButtons.elements[i++].value = " T ";
   document.calButtons.elements[i++].value = " F ";
   document.calButtons.elements[i++].value = " S ";

   // blank out non date buttons
   for (i=7; i<startingPos; i++)
         document.calButtons.elements[i].value = "   ";

        for (i=startingPos; i<days; i++) 
                document.calButtons.elements[i].value = i-startingPos+1;

   // show focus on today if the calendar is the proper month and year
   if (month==nowMonth && year==nowYear+1995) 
      document.calButtons.elements[nowDay+startingPos-1].focus();

 
   // blank out rest of non date buttons
        for (i=days; i<49; i++) 
      document.calButtons.elements[i].value = "   ";
}

function leapYear (Year) {
        if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0))
                return (1);
        else
                return (0);
}

function getDaysInMonth(month,year)  {
   var days;
   if (month==1 || month==3 || month==5 || month==7 || month==8 ||
      month==10 || month==12)  days=31;
   else if (month==4 || month==6 || month==9 || month==11) days=30;
   else if (month==2)  {
      if (leapYear (year)==1)  days=29;
      else days=28;
   }
        return (days);
}
// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="white" ONLOAD="displayCalendar(1)">

<CENTER><FORM NAME="calControl">month <SELECT NAME="month"><OPTION>Jan <OPTION>Feb <OPTION>Mar <OPTION>Apr <OPTION>May <OPTION>Jun <OPTION>Jul <OPTION>Aug <OPTION>Sep <OPTION>Oct <OPTION>Nov <OPTION>Dec </SELECT>
year <SELECT NAME="year"><OPTION>1995 <OPTION>1996 <OPTION>1997 <OPTION>1998 <OPTION>1999 <OPTION>2000 </SELECT><INPUT TYPE="button" NAME="button1" VALUE="Create"
   onClick="displayCalendar(0)"></FORM><FORM NAME="calButtons"><INPUT TYPE="button" NAME="but0"  value="     "><INPUT TYPE="button" NAME="but1"  value="     "><INPUT TYPE="button" NAME="but2"  value="     "><INPUT TYPE="button" NAME="but3"  value="     "><INPUT TYPE="button" NAME="but4"  value="     "><INPUT TYPE="button" NAME="but5"  value="     "><INPUT TYPE="button" NAME="but6"  value="     "></CENTER>

<CENTER><INPUT TYPE="button" NAME="but7"  value="     "><INPUT TYPE="button" NAME="but8"  value="     "><INPUT TYPE="button" NAME="but9"  value="     "><INPUT TYPE="button" NAME="but10" value="     "><INPUT TYPE="button" NAME="but11" value="     "><INPUT TYPE="button" NAME="but12" value="     "><INPUT TYPE="button" NAME="but13" value="     "></CENTER>

<CENTER><INPUT TYPE="button" NAME="but14" value="     "><INPUT TYPE="button" NAME="but15" value="     "><INPUT TYPE="button" NAME="but16" value="     "><INPUT TYPE="button" NAME="but17" value="     "><INPUT TYPE="button" NAME="but18" value="     "><INPUT TYPE="button" NAME="but19" value="     "><INPUT TYPE="button" NAME="but20" value="     "></CENTER>

<CENTER><INPUT TYPE="button" NAME="but21" value="     "><INPUT TYPE="button" NAME="but22" value="     "><INPUT TYPE="button" NAME="but23" value="     "><INPUT TYPE="button" NAME="but24" value="     "><INPUT TYPE="button" NAME="but25" value="     "><INPUT TYPE="button" NAME="but26" value="     "><INPUT TYPE="button" NAME="but27" value="     "></CENTER>

<CENTER><INPUT TYPE="button" NAME="but28" value="     "><INPUT TYPE="button" NAME="but29" value="     "><INPUT TYPE="button" NAME="but30" value="     "><INPUT TYPE="button" NAME="but31" value="     "><INPUT TYPE="button" NAME="but32" value="     "><INPUT TYPE="button" NAME="but33" value="     "><INPUT TYPE="button" NAME="but34" value="     "></CENTER>

<CENTER><INPUT TYPE="button" NAME="but35" value="     "><INPUT TYPE="button" NAME="but36" value="     "><INPUT TYPE="button" NAME="but37" value="     "><INPUT TYPE="button" NAME="but38" value="     "><INPUT TYPE="button" NAME="but39" value="     "><INPUT TYPE="button" NAME="but40" value="     "><INPUT TYPE="button" NAME="but41" value="     "></CENTER>

<CENTER><INPUT TYPE="button" NAME="but42" value="     "><INPUT TYPE="button" NAME="but43" value="     "><INPUT TYPE="button" NAME="but44" value="     "><INPUT TYPE="button" NAME="but45" value="     "><INPUT TYPE="button" NAME="but46" value="     "><INPUT TYPE="button" NAME="but47" value="     "><INPUT TYPE="button" NAME="but48" value="     "></CENTER>

</FORM></CENTER>

</body>
</html>

Fechas y horarios