Menu
Hello,
I am looking for a javascript calendar for my date input field that has no images in it. When I take a look at most calendars online, they have images for the buttons. I was looking for something that just had <, <<, >>, > instead.
Does anyone have something like this?
Thank,
Derek
<i>
</i><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes"/>
<style type="text/css">
@media print { body { font-size: 16pt } }
@media screen { body { font-size: 16px } }
@media handheld { body { font-size: 24px } }
@media screen, print { body { line-height: 1.2 } }
div.cal {
border: 1px solid blue;
display: none;
}
</style>
<script type="text/javascript" src="cal.js"></script>
<script type="text/javascript">
var MonthsYears = [ [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}],
[{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}],
[{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}] ];
var month = 0; var year = 0;
var CalSize = 1; // allows 1..12;
var CalVert = 1; // allows 1,2,3,4,6,12 as sizes
var CalWide = 4;
// var CalWide = CalSize / CalVert;
Initialize();
function InitMonth() {
for (i=0; i<12; i++) { document.getElementById('cal'+i).style.display = 'none'; }
for (i=0; i<CalSize; i++) { document.getElementById('cal'+i).style.display = 'block'; }
}
function InitYear() {
for (i=0; i<12; i++) { document.getElementById('cal'+i).style.display = 'block'; }
}
function Initialize() {
var now = new Date(); month = now.getMonth(); year = now.getFullYear();
for (i=0; i<12; i++) {
MonthsYears[i].Month = month;
MonthsYears[i].Year = year;
}
Normalize(0);
}
function Normalize(amt) {
// Array return idea from:
// http://www.webdeveloper.com/forum/showthread.php?t=167956
var arr = new Array();
for (i=0; i<12; i++) {
MonthsYears[i].Month = month+i;
MonthsYears[i].Year = year;
arr = Adjust(amt,MonthsYears[i].Month,MonthsYears[i].Year);
MonthsYears[i].Month = arr.AMonth;
MonthsYears[i].Year = arr.AYear;
}
}
function Adjust(Direction,M,Y) {
M += Direction;
if (M < 0) { M += 12; Y = Y-1; }
if (M > 11) { M -= 12; Y = Y+1; }
return {AMonth:M, AYear:Y};
}
function Redisplay() {
var str = '';
var calID = '';
for (i=0; i<12; i++ ) {
calID = 'cal'+i;
str = displayCalendar(MonthsYears[i].Month+1,MonthsYears[i].Year);
document.getElementById(calID).innerHTML = str;
}
}
function AdjustMonthYear(Mamt,Yamt) {
var arr = new Array();
arr = Adjust(Mamt,month,year+Yamt);
month = arr.AMonth;
year = arr.AYear;
}
function prevMonthYear(Mamt,Yamt) { AdjustMonthYear(Mamt,Yamt); Normalize(0); Redisplay(); }
function nextMonthYear(Mamt,Yamt) { AdjustMonthYear(Mamt,Yamt); Normalize(0); Redisplay(); }
</script>
</head>
<body onLoad="InitMonth()">
<!-- could also InitYear() if desired -->
<script type="text/javascript">
var calID = ''; // CalWide = CalSize / CalVert;
var str = '<table border="0">';
for (i=0; i<12; i++) {
calID = 'cal'+i;
if ((i % CalWide) == 0) { str += '<tr>'; }
str += '<td><div id="'+calID+'" class="cal">'
str += displayCalendar(MonthsYears[0].Month+1,MonthsYears[0].Year)+'</div></td>';
}
str += '<tr><th>';
str += '<a href="#" onClick="InitMonth();Initialize();Redisplay();return false">Month</a>';
str += ' / ';
str += '<a href="#" onClick="InitYear();Redisplay();return false">Year</a>';
str += '</th></tr>';
str += '<tr><th>';
str += '<button onClick="prevMonthYear( 0,-1);return false;">&lt;&lt;</button>';
str += '<button onClick="prevMonthYear(-1, 0);return false;">&lt;</button>';
// str += '<button onClick="Initialize();Redisplay();return false;">*</button>';
str += '<button onClick="nextMonthYear( 1, 0);return false;">&gt;</button>';
str += '<button onClick="nextMonthYear( 0, 1);return false;">&gt;&gt;</button>';
str += '</th></tr>';
str += '</table>';
document.write(str);
Redisplay();
</script>
</body>
</html>
<i>
</i>// Calendar Display
var MonthOfYear = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
function displayCalendar(month, year) { <br/>
month = parseInt(month);
month--; // adjustment when 'month' parameter passed as "1"..."12"
year = parseInt(year);
var i = 0;
var days = getDaysInMonth(month+1,year);
var firstOfMonth = new Date (year, month, 1);
var startingPos = firstOfMonth.getDay();
days += startingPos;
var page = '<pre> '+MonthOfYear[month]+' '+year;
page += "n Su Mo Tu We Th Fr Sa";
page += "n --------------------";
for (i = 0; i < startingPos; i++) {
if ( i%7 == 0 ) page += "n ";
page += " ";
}
for (i = startingPos; i < days; i++) {
if ( i%7 == 0 ) page += "n ";
// if (i-startingPos+1 < 10) page += "0";
if (i-startingPos+1 < 10) page += " ";
page += i-startingPos+1;
page += " ";
}
for (i=days; i<42; i++) {
if ( i%7 == 0 ) page += "n ";
page += " ";
}
page += '</pre>';
return page;
}
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 (isLeapYear(year)) { days=29; }
else { days=28; }
}
return (days);
}
function isLeapYear (Year) {
if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) { return (true); } else { return (false); }
}
<i>
</i><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quick Month Calendar</title>
<style type="text/css">
div.cal { width:225px; } /* border: 1px solid blue; } */
.date { cursor:pointer; font-size:0.9em; } /* cursor:default; } */
</style>
<script type="text/javascript" src="./cal.js"></script>
<script type="text/javascript">
// Modified for: http://www.webdeveloper.com/forum/showthread.php?t=209904
// Modified again for: http://www.webdeveloper.com/forum/newreply.php?do=postreply&t=283147
var now = new Date(); // normally use this
var monthM = now.getMonth()+1;
var yearM = now.getFullYear();
function Initialize() {
var now = new Date(); // normally use this
monthM = now.getMonth()+1; yearM = now.getFullYear();
monthC = monthM; yearC = yearM;
return '';
}
</script>
</head>
<body onload="Initialize();CalendarRedisplay(monthM,yearM)">
<input type="text" id="SelectedDate" value="" size="10">
<table border="0"><tr><td>
<table border="0">
<tr>
<td colspan="3">
<div id="calM" class="cal">'
<script type="text/javascript"> CalendarRedisplay(monthM,yearM); </script>
</div></td></tr>
</table>
</td>
<tr>
</table>
</body>
</html>
<i>
</i>// Calendar Display (cal.js)
var MonthOfYear = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var DaysInMonth = ['',31,28,31,30,31,30,31,31,30,31,30,31];
var monthC = 0; var yearC = 0;
function CalendarRedisplay(M,Y) {
if (M < 1) { M = 12; Y--; }
if (M > 12) { M = 1; Y++; }
monthC = M; yearC = Y;
document.getElementById("calM").innerHTML = displayCalendar(M,Y);
}
function displayCalendar(month, year) {
month = parseInt(month);
year = parseInt(year);
var i = 0;
var days = getDaysInMonth(month,year);
var firstOfMonth = new Date (year, (month-1), 1);
var startingPos = firstOfMonth.getDay();
days += startingPos;
var page = '<table border="1" width="100%"><tr><th colspan="7">';
page += '<button onClick="CalendarRedisplay('+month+','+(year-1)+');return false">|</button> ';
page += '<button onClick="CalendarRedisplay('+(month-1)+','+year+');return false">&lt;</button> ';
page += '<button onClick="CalendarRedisplay('+monthM+','+yearM+');return false;">';
page += MonthOfYear[month]+' '+year+'</button>';
page += ' <button onClick="CalendarRedisplay('+(month+1)+','+year+');return false">&gt;</button>';
page += ' <button onClick="CalendarRedisplay('+month+','+(year+1)+');return false">|</button>';
page += '</th></tr>';
page += '<tr><th class="date">Su</th><th class="date">Mo</th><th class="date">Tu</th><th class="date">';
page += 'We</th><th class="date">Th</th><th class="date">Fr</th><th class="date">Sa</th></tr>';
page += '<tr>'; <br/>
for (i = 0; i < startingPos; i++) {
if ( i%7 == 0 ) page += "</tr><tr>";
page += '<th><span class="date">&nbsp;</span></th>';
}
for (i = startingPos; i < days; i++) {
if ( i%7 == 0 ) page += "</tr><tr>";
page += '<th><span class="date"';
page += ' onclick="calAction('+"'"+pad(month)+'/'+pad(i-startingPos+1)+'/'+year+"'"+')">';
page += (i-startingPos+1) + '</span></th>';
}
for (i=days; i<42; i++) {
if ( i%7 == 0 ) page += "</tr><tr>";
page += "<td>&nbsp;</td>";
}
page += '</tr></table>';
return page;
}
function getDaysInMonth(month,year) {
var days = DaysInMonth[month];
if ((month == 2) && isLeapYear(year)) { days=29; }
return days;
}
function isLeapYear (Year) {
if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) { return (true); }
else { return (false); }
}
function pad(value) { return value=(value < 10)?'0'+value:value; }
function calAction(info) { document.getElementById('SelectedDate').value = info; }
0.1.9 — BETA 5.18