var d = new Date();
var h = d.getHour();
var m = d.getMinute();
var s = d.getSecond();
if (h == 12) {
alert(h + ":" + m + ":" + s + " PM");
} else {
alert(h + ":" + m + ":" + s + " AM");
}
What should i do?
Should i change the d.getMinute() to d.getMin()?
Thank you all
The methods are all supposed to be pluralized:
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if(h == 12) {
alert(h+":"+m+":"+s+" PM");
} else {
alert(h+":"+m+":"+s+" AM");
}
For more more information about the Date methods: W3School
I have written code to display the date (month, day, day nr, and year) with javascript and placed it in a ul.
my question is how to build up a li with html tags (so that i can place breaks) in a javascript function because now if i would for example do the following
var output = "<li>" + month_full[monthFull] + "<br/>" + weekDay[day] + "</li>";
return output;
it will output exactly how its shown -> http://gyazo.com/5a67f3dbd7db07254bd38d58116aac7c
you can horizontally scroll through my months. now i would like to build it up like so: http://gyazo.com/adb760c912691a7ce26b1cc40d89d1df
to check my jsfiddle to see what i have now: https://jsfiddle.net/GY22/vqfk8yLL/2/
my javascript code is the following:
<script>
// Get today's current date.
var now = new Date();
console.log(now);
// Calculates the number of the week
var weekNumber = ((now.getDate()<10) ? "0" : "")+ now.getDate();
console.log("The current week number is: " + weekNumber);
// Array list of months.
var month_full = new Array(12);
month_full[0] = "January";
month_full[1] = "February";
month_full[2] = "March";
month_full[3] = "April";
month_full[4] = "May";
month_full[5] = "June";
month_full[6] = "July";
month_full[7] = "August";
month_full[8] = "September";
month_full[9] = "October";
month_full[10] = "November";
month_full[11] = "December";
//console.log(month[3]);
var weekDay = new Array(7);
weekDay[0]= "Su";
weekDay[1] = "Mo";
weekDay[2] = "Tu";
weekDay[3] = "We";
weekDay[4] = "Th";
weekDay[5] = "Fr";
weekDay[6] = "Sa";
function weekNr_Month(date){
var month = date.getUTCMonth();
return month[month];
}
function formatDate(date) {
var month = date.getUTCMonth() +1;
var dayNumber = date.getUTCDate();
var year = date.getUTCFullYear();
var day = date.getUTCDay();
var monthFull = date.getUTCMonth();
return month_full[monthFull] + " " + weekDay[day] + ": " + dayNumber + "-" + month + "-" + year + "; ";
}
console.log(formatDate(new Date()));
var today
function addListItem(){
var createListItem = document.createElement("li");
var outputListItem = document.createTextNode(today);
createListItem.appendChild(outputListItem);
var createUl = document.getElementsByTagName("ul");
createUl[0].appendChild(createListItem);
}
// loop starting from may up untill for months from the set date
for (var i = 1; i < 122; i++){
today = formatDate(new Date(2015, 05, i));
//document.write(today + "<br />");
addListItem();
}
document.getElementById('timeline').
getElementsByTagName('li')[(new Date()).getDate() + 1].className += ' currentDate';
</script>
That is because you are creating a text node instead of html content.
Try this:
var createListItem = document.createElement("li");
createListItem.innerHTML = today;
I am trying to set Label text property based on the selection of dropdownlist data. I have a label control which stores current date and I am selecting number of days from dropdownlist to be added with current date and display the new date within another label control. While doing this I am getting
Uncaught ReferenceError: findDate is not defined.
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
function findDate() {
var selectvalid = $("select[id$=ddlvalid]").val();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 7);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
$("span[id$=lblenddt]").text(output);
}
else if (selectvalid == "Upto 15 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 15);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById("<%=lblenddt.ClientID%>").innerHTML = output;
}
else if (selectvalid == "Upto 30 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 30);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById("<%=lblenddt.ClientID%>").innerHTML = output;
}
};
window.onload = function() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById("<%=lblenqmdon.ClientID%>").innerHTML = output;
};
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Enquiry Made On:</td>
<td>
<label id="lblenqmdon" runat="server"></label>
</td>
</tr>
<tr>
<td>Enquiry Validity:</td>
<td><asp:DropDownList ID="ddlvalid" runat="server" ClientIDMode="static" onchange="javascript:findDate();">
<asp:ListItem>Select Validity</asp:ListItem>
<asp:ListItem>Upto 7 Days</asp:ListItem>
<asp:ListItem>Upto 15 Days</asp:ListItem>
<asp:ListItem>Upto 30 Days</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Enquiry Valid Upto:</td>
<td>
<label id="lblenddt" runat="server" ClientIDMode="static"></label>
</td>
</tr>
</table>
</asp:Content>
Please guide me where I am doing wrong?
Simply define a function findDate in javascript you have written $(function findDate() change it to function findDate() also you don't need to bind onchange again in javascript code you have already binded this in dropdown html onchange="javascript:findDate();"
function findDate() {
var selectvalid = $("#ddlvalid option:selected").text();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 7);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById("<%=lblenddt.ClientID%>").value = output;
}
else if (selectvalid == "Upto 15 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 15);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById("<%=lblenddt.ClientID%>").innerHTML = output;
}
else if (selectvalid == "Upto 30 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 30);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById("<%=lblenddt.ClientID%>").innerHTML = output;
}
}
window.onload = function() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById("<%=lblenqmdon.ClientID%>").innerHTML = output;
};
});
Edit
You have so set ClientIDMode="static" on dropdown and label to be found by javascript by exact id
I am having two Label controls and a dropdownlist on my web form. I am displaying current date in Label1 and I want to display Expiry Date in Label2 based on selection of dropdownlist. What I am trying to do is I want to display expiry date within Label2 on selecting data from dropdownlist i.e. if "Upto 7 Days" then 7Days will be added to current date and the new date will be displayed within Label2.
My aspx page-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$("#ddlvalid").change(function () {
var selectvalid = $("#ddlvalid option:selected").text();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 7;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
else if (selectvalid == "Upto 15 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 15;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
else if (selectvalid == "Upto 30 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 30;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
});
window.onload = function show() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById('lblenqmdon').innerHTML = output;
};
</script>
<body>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Enquiry Made On:</td>
<td>
<label id="lblenqmdon" runat="server"></label>
</td>
</tr>
<tr>
<td>Enquiry Validity:</td>
<td><asp:DropDownList ID="ddlvalid" runat="server">
<asp:ListItem>Select Validity</asp:ListItem>
<asp:ListItem>Upto 7 Days</asp:ListItem>
<asp:ListItem>Upto 15 Days</asp:ListItem>
<asp:ListItem>Upto 30 Days</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Enquiry Valid Upto:</td>
<td>
<label id="lblenddt" runat="server"></label>
</td>
</tr></table>
</div></body>
</html>
My Javascript code is not working. Please guide me where I am doing wrong?
Try This
<script type="text/javascript">
function findDate() {
var selectvalid = document.getElementById("<%=ddlvalid.ClientID %>").value;
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 7;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
else if (selectvalid == "Upto 15 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 15;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
else if (selectvalid == "Upto 30 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 30;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
}
</script>
<script type="text/javascript">
window.onload = function () {
getDate();
};
function getDate() {
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
</script>
AND in Form
<asp:DropDownList ID="ddlvalid" runat="server" onchange="javascript:findDate();">
<asp:ListItem>Select Validity</asp:ListItem>
<asp:ListItem>Upto 7 Days</asp:ListItem>
<asp:ListItem>Upto 15 Days</asp:ListItem>
<asp:ListItem>Upto 30 Days</asp:ListItem>
</asp:DropDownList>
I managed to do the same like this-$(function () {
<script type="text/javascript">
$("#ddlvalid").change(function () {
var selectvalid = $("#ddlvalid option:selected").text();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 7);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
else if (selectvalid == "Upto 15 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 15);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
else if (selectvalid == "Upto 30 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 30);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
});
window.onload = function show() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById('lblenqmdon').innerHTML = output;
};
});
</script>
This question already has answers here:
How do I clear the content of a div using JavaScript? [closed]
(2 answers)
Closed 7 years ago.
I'm making a calendar purely from Javascript, but when then previous and next months are shown current content is still present. It should replace the div content. Also, current date should be the only one with red font displayed.
<html>
<head><script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var time = now.toLocaleTimeString();
var date = now.getDate();
now = null;
var calElem = document.getElementById("cal");
function febDays(year) {
if (year % 4 == 0) {
return 29;
} else {
return 28;
}
}
function getDays(month, year) {
var days = new Array(12);
days[0] = 31;
days[1] = febDays(year);
days[2] = 31;
days[3] = 30;
days[4] = 31;
days[5] = 30;
days[6] = 31;
days[7] = 31;
days[8] = 30;
days[9] = 31;
days[10] = 30;
days[11] = 31;
return days[month];
}
function getMonthName(month) {
var mn = new Array(12);
mn[0] = "January";
mn[1] = "February";
mn[2] = "March";
mn[3] = "April";
mn[4] = "May";
mn[5] = "June";
mn[6] = "July";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function monthName(month) {
var mn = new Array(12);
mn[0] = "Jan";
mn[1] = "Feb";
mn[2] = "Mar";
mn[3] = "Apr";
mn[4] = "May";
mn[5] = "Jun";
mn[6] = "Jul";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function setCal() {
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
function previousMonth() {
document.getElementById('cal').innerHTML = "";
month--;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "January"){
year--;
month = 11;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function nextMonth() {
document.getElementById('cal').innerHTML = "";
month++;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "December"){
year++;
month = 0;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function drawCal(startDay, lastDate, date, monthName, year, month) {
var headerHeight = 50;
var border = 2;
var cellspacing = 4;
var headerSize = "+3";
var colWidth = 60;
var dayCellHeight = 25;
var cellHeight = 40;
var todayColor = "red";
var text = "";
text += '<div id="cal">';
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>';
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>';
text += '<FONT SIZE=' + headerSize + '>';
text += monthName + ' ' + year;
text += '</FONT>';
text += '</TH>';
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
var closeCol = '</TD>';
var weekDay = new Array(7);
weekDay[0] = "Sunday";
weekDay[1] = "Monday";
weekDay[2] = "Tuesday";
weekDay[3] = "Wednesday";
weekDay[4] = "Thursday";
weekDay[5] = "Friday";
weekDay[6] = "Saturday";
text += '<TR ALIGN="center" VALIGN="center">';
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '</TR>';
var digit = 1;
var curCell = 1;
for (var row = 1; row <= Math.ceil((lastDate + startDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">';
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break;
if (curCell < startDay) {
text += '<TD></TD>';
curCell++;
} else {
if (digit == date) {
text += '<TD HEIGHT=' + cellHeight + '>';
text += '<FONT COLOR="' + todayColor + '">';
text += digit + " ";
text += '</FONT>';
text += '</TD>';
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>';
digit++;
}
}
text += '</TR>';
}
text += '</TABLE>';
text += '</CENTER>';
text += '</div>';
text += '<button onclick="previousMonth()"><</button>';
text += '<button onclick="nextMonth()">></button>';
document.write(text);
}
</script></head>
<body onload="setCal()">
</body>
</html>
I think it will be better if you can use a container element and set its content rather than to use document.write()
<html>
<head><script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var time = now.toLocaleTimeString();
var date = now.getDate();
now = null;
var calElem = document.getElementById("cal");
function febDays(year) {
if (year % 4 == 0) {
return 29;
} else {
return 28;
}
}
function getDays(month, year) {
var days = new Array(12);
days[0] = 31;
days[1] = febDays(year);
days[2] = 31;
days[3] = 30;
days[4] = 31;
days[5] = 30;
days[6] = 31;
days[7] = 31;
days[8] = 30;
days[9] = 31;
days[10] = 30;
days[11] = 31;
return days[month];
}
function getMonthName(month) {
var mn = new Array(12);
mn[0] = "January";
mn[1] = "February";
mn[2] = "March";
mn[3] = "April";
mn[4] = "May";
mn[5] = "June";
mn[6] = "July";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function monthName(month) {
var mn = new Array(12);
mn[0] = "Jan";
mn[1] = "Feb";
mn[2] = "Mar";
mn[3] = "Apr";
mn[4] = "May";
mn[5] = "Jun";
mn[6] = "Jul";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function setCal() {
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
function previousMonth() {
document.getElementById('cal').innerHTML = "";
month--;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "January"){
year--;
month = 11;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function nextMonth() {
document.getElementById('cal').innerHTML = "";
month++;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "December"){
year++;
month = 0;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function drawCal(startDay, lastDate, date, monthName, year, month) {
var headerHeight = 50;
var border = 2;
var cellspacing = 4;
var headerSize = "+3";
var colWidth = 60;
var dayCellHeight = 25;
var cellHeight = 40;
var todayColor = "red";
var text = "";
text += '<div id="cal">';
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>';
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>';
text += '<FONT SIZE=' + headerSize + '>';
text += monthName + ' ' + year;
text += '</FONT>';
text += '</TH>';
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
var closeCol = '</TD>';
var weekDay = new Array(7);
weekDay[0] = "Sunday";
weekDay[1] = "Monday";
weekDay[2] = "Tuesday";
weekDay[3] = "Wednesday";
weekDay[4] = "Thursday";
weekDay[5] = "Friday";
weekDay[6] = "Saturday";
text += '<TR ALIGN="center" VALIGN="center">';
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '</TR>';
var digit = 1;
var curCell = 1;
for (var row = 1; row <= Math.ceil((lastDate + startDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">';
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break;
if (curCell < startDay) {
text += '<TD></TD>';
curCell++;
} else {
if (digit == date) {
text += '<TD HEIGHT=' + cellHeight + '>';
text += '<FONT COLOR="' + todayColor + '">';
text += digit + " ";
text += '</FONT>';
text += '</TD>';
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>';
digit++;
}
}
text += '</TR>';
}
text += '</TABLE>';
text += '</CENTER>';
text += '</div>';
text += '<button onclick="previousMonth()"><</button>';
text += '<button onclick="nextMonth()">></button>';
document.getElementById('calc').innerHTML=text;
}
</script></head>
<body onload="setCal()">
<div id="calc"></div>
</body>
</html>
if you want to clear any HTML element you would just
DO NOT use document.write() it clears the whole page.
It's the document.write() It always stays there no matter what. Try not to use document.write()
use createElement('div') instead. It's much more clean, you can keep track of the elements, and they're static, unless you want them to change. everything is under your control.
document.getElementById('Clear_This_Div_id').innerHTML = '';
This will usually clear the element
Without changing much of the other part of your code, you can just change the
document.write(text);
to
document.getElementsByTagName('body')[0].innerHTML = text;
This will clear off the previous content before putting the new one, since you are putting in the body every time.