JavaScript – Calendar – Date Picker
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | <!DOCTYPE html> <html> <head> <style type= "text/css" > span.label {color:black;width:30;height:16;text-align:center;margin-top:0;background: #ffF;font:bold 13px Arial} span.c1 {cursor:hand;color:black;width:30;height:16;text-align:center;margin-top:0;background: #ffF;font:bold 13px Arial} span.c2 {cursor:hand;color:red;width:30;height:16;text-align:center;margin-top:0;background: #ffF;font:bold 13px Arial} span.c3 {cursor:hand;color: #b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 12px Arial} </style> <script type= "text/javascript" > function maxDays(mm, yyyy){ var mDay; if ((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){ mDay = 30; } else { mDay = 31 if (mm == 1){ if (yyyy/4 - parseInt(yyyy/4) != 0){ mDay = 28 } else { mDay = 29 } } } return mDay; } function changeBg(id){ if (eval(id).style.backgroundColor != "yellow" ){ eval(id).style.backgroundColor = "yellow" } else { eval(id).style.backgroundColor = "#ffffff" } } function writeCalendar(){ var now = new Date var dd = now.getDate() var mm = now.getMonth() var dow = now.getDay() var yyyy = now.getFullYear() var arrM = new Array( "January" , "February" , "March" , "April" , "May" , "June" , "July" , "August" , "September" , "October" , "November" , "December" ) var arrY = new Array() for (ii=0;ii<=4;ii++){ arrY[ii] = yyyy - 2 + ii } var arrD = new Array( "Sun" , "Mon" , "Tue" , "Wed" , "Thu" , "Fri" , "Sat" ) var text = "" text = "<form name=calForm>" text += "<table border=1>" text += "<tr><td>" text += "<table width=100%><tr>" text += "<td align=left>" text += "<select name=selMonth onChange='changeCal()'>" for (ii=0;ii<=11;ii++){ if (ii==mm){ text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>" } else { text += "<option value= " + ii + ">" + arrM[ii] + "</option>" } } text += "</select>" text += "</td>" text += "<td align=right>" text += "<select name=selYear onChange='changeCal()'>" for (ii=0;ii<=4;ii++){ if (ii==2){ text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>" } else { text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>" } } text += "</select>" text += "</td>" text += "</tr></table>" text += "</td></tr>" text += "<tr><td>" text += "<table border=1>" text += "<tr>" for (ii=0;ii<=6;ii++){ text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>" } text += "</tr>" aa = 0 for (kk=0;kk<=5;kk++){ text += "<tr>" for (ii=0;ii<=6;ii++){ text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)'>1</span></td>" aa += 1 } text += "</tr>" } text += "</table>" text += "</td></tr>" text += "</table>" text += "</form>" document.write(text) changeCal() } function changeCal(){ var now = new Date var dd = now.getDate() var mm = now.getMonth() var dow = now.getDay() var yyyy = now.getFullYear() var currM = parseInt(document.calForm.selMonth.value) var prevM if (currM!=0){ prevM = currM - 1 } else { prevM = 11 } var currY = parseInt(document.calForm.selYear.value) var mmyyyy = new Date() mmyyyy.setFullYear(currY) mmyyyy.setMonth(currM) mmyyyy.setDate(1) var day1 = mmyyyy.getDay() if (day1 == 0){ day1 = 7 } var arrN = new Array(41) var aa for (ii=0;ii<day1;ii++){ arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1 } aa = 1 for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){ arrN[ii] = aa aa += 1 } aa = 1 for (ii=day1+maxDays(currM,currY);ii<=41;ii++){ arrN[ii] = aa aa += 1 } for (ii=0;ii<=41;ii++){ eval( "sp" +ii).style.backgroundColor = "#FFFFFF" } var dCount = 0 for (ii=0;ii<=41;ii++){ if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){ eval( "sp" +ii).innerHTML = arrN[ii] eval( "sp" +ii).className = "c3" } else { eval( "sp" +ii).innerHTML = arrN[ii] if ((dCount==0)||(dCount==6)){ eval( "sp" +ii).className = "c2" } else { eval( "sp" +ii).className = "c1" } if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){ eval( "sp" +ii).style.backgroundColor= "#90EE90" } } dCount += 1 if (dCount>6){ dCount=0 } } } </script> </head> <body> <script type= "text/javascript" >writeCalendar()</script> </body> </html> |
Notice the code ready to copy and paste:
1 2 3 4 5 6 7 | <style type= "text/css" > .... </style> <script> .... </script> |
Notice:
1 | <script type= "text/javascript" >writeCalendar()</script> |
Put the code above in the body of your document, where you want the calendar to show up.
DEMO