Develop Reference

Return clicked date value from calendar

I want to return chosen by click date in alert window. For example, if today is 12 April and I clicked 1 January of 2016 alert should show 2016-1-1.
Here is my Javascript code:
var Cal = function(divId) {
//Store div id
this.divId = divId;
// Days of week, starting on Sunday
this.DaysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
// Months, stating on January
this.Months = ['January', 'February', 'Marhc', 'April', 'May', 'June', 'July', 'August', 'September', 'Octomber', 'November', 'December'];
// Set the current month, year
var d = new Date();
this.currMonth = d.getMonth();
this.currYear = d.getFullYear();
this.currDay = d.getDate();
};
// Goes to next month
Cal.prototype.nextMonth = function() {
if (this.currMonth == 11) {
this.currMonth = 0;
this.currYear = this.currYear + 1;
} else {
this.currMonth = this.currMonth + 1;
}
this.showcurr();
};
// Goes to previous month
Cal.prototype.previousMonth = function() {
if (this.currMonth == 0) {
this.currMonth = 11;
this.currYear = this.currYear - 1;
} else {
this.currMonth = this.currMonth - 1;
}
this.showcurr();
};
// Show current month
Cal.prototype.showcurr = function() {
this.showMonth(this.currYear, this.currMonth);
};
// Show month (year, month)
Cal.prototype.showMonth = function(y, m) {
var d = new Date()
// First day of the week in the selected month
,
firstDayOfMonth = new Date(y, m, 1).getDay()
// Last day of the selected month
,
lastDateOfMonth = new Date(y, m + 1, 0).getDate()
// Last day of the previous month
,
lastDayOfLastMonth = m == 0 ? new Date(y - 1, 11, 0).getDate() : new Date(y, m, 0).getDate();
var html = '<table>';
// Write selected month and year
html += '<thead><tr>';
html += '<td colspan="7">' + this.Months[m] + ' ' + y + '</td>';
html += '</tr></thead>';
// Write the header of the days of the week
html += '<tr class="days">';
for (var i = 0; i < this.DaysOfWeek.length; i++) {
html += '<td>' + this.DaysOfWeek[i] + '</td>';
}
html += '</tr>';
// Write the days
var i = 1;
do {
var dow = new Date(y, m, i).getDay();
// If Sunday, start new row
if (dow == 0) {
html += '<tr>';
}
// If not Sunday but first day of the month
// it will write the last days from the previous month
else if (i == 1) {
html += '<tr>';
var k = lastDayOfLastMonth - firstDayOfMonth + 1;
for (var j = 0; j < firstDayOfMonth; j++) {
html += '<td class="not-current">' + k + '</td>';
k++;
}
}
// Write the current day in the loop
var chk = new Date();
var chkY = chk.getFullYear();
var chkM = chk.getMonth();
if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) {
html += '<td class="today">' + i + '</td>';
} else {
html += '<td class="normal">' + i + '</td>';
}
// If Saturday, closes the row
if (dow == 6) {
html += '</tr>';
}
// If not Saturday, but last day of the selected month
// it will write the next few days from the next month
else if (i == lastDateOfMonth) {
var k = 1;
for (dow; dow < 6; dow++) {
html += '<td class="not-current">' + k + '</td>';
k++;
}
}
i++;
} while (i <= lastDateOfMonth);
// Closes table
html += '</table>';
// Write HTML to the div
document.getElementById(this.divId).innerHTML = html;
};
// On Load of the window
window.onload = function() {
// Start calendar
var c = new Cal("divCal");
c.showcurr();
// Bind next and previous button clicks
getId('btnNext').onclick = function() {
c.nextMonth();
};
getId('btnPrev').onclick = function() {
c.previousMonth();
};
}
// Get element by id
function getId(id) {
return document.getElementById(id);
}
function MyFunction(){
alert(document.getElementById('dge').text);
}

I looked at the calendar in the example, and all of the calendar dates have data-year, data-month and data-day set (as far as I could see). So a simple idea would be to attach an event to every a that has a data-month, data-year, and data-day set and then alert the date as follows ...
$("a[data-year][data-month][data-day]").on("click", function(){ alert($(this).data("year")+"-"+$(this).data("month")+"-" +$(this).data("day"));})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-day="12" href="content.php?year=2017&month=4&day=12&lang=ge" data-month="4" data-year="2017">12</a>
Furthermore, if your code is open to little more modification, then all the a tags that are dates could be in a class like class="dateClass" so that your selector does not get so complex like above, instead only looks for the elements belonging to this class ... Like the snippet below :
$(".dateClass").on("click", function(){ alert($(this).data("year")+"-"+$(this).data("month")+"-" +$(this).data("day"));})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="dateClass" data-day="12" href="content.php?year=2017&month=4&day=12&lang=ge" data-month="4" data-year="2017">12</a>
---- EDIT ----
Given the further request ( and not using jQuery this time ), you could add the date, month, and year to the a tag as attributes and also send the this to the function so that the currently clicked a element is sent to function (get rid of the duplicate id dge by the way) like below :
html += '<td class="normal">' + i + '</td>';
becomes
html += '<td class="normal">' + i + '</td>';
Then the below snippet should do the trick :
function MyFunction(val){
alert(val.getAttribute("day")+"-"
+val.getAttribute("month")+"-"
+val.getAttribute("year"));
};
3
4

Jquery Clone method increment name tag

Hello I am trying to add increment in my all form fields from zero to the number whenever I add new clone it assigns the next number to the name tag, I tried all the ways but no any methods works for me.
Here is my fiddle
https://jsfiddle.net/o5wam5r2/
and here is my JS code
var formItem;
$(document).ready(function() {
//Clone and remove your div instead of hiding it
formItem = $('.ScheduleextraPartTemplate').clone();
$('.ScheduleextraPartTemplate').remove();
formItem.addClass('clone clone-1');
$('#Schedulecontainer').append(formItem);
});
$(document).on('click', '#ScheduleaddRow', function() {
var cloneForm = $('.clone').last().clone();
var cloneNum = $('.clone').length;
cloneForm.removeClass('clone-'+cloneNum).addClass('clone-' + (cloneNum+1));
var date = cloneForm.find('[name="txtSchedule"]').val();
cloneForm.find('[name="txtSchedule"]').val(addOneMonth(date));
$('#Schedulecontainer').append(cloneForm);
})
function addOneMonth(date) {
var year = parseInt(date.split("-")[0]);
var month = parseInt(date.split("-")[1]) + 1;
var day = parseInt(date.split("-")[2]);
if(month > 12) {
month = month - 12;
year++
}
return year + "-" + month + "-" + day;
}

I fixed it by changing a little piece of code
var formItem;
var counter = 0;
$(document).ready(function() {
//Clone and remove your div instead of hiding it
formItem = $('.ScheduleextraPartTemplate').clone();
formItem.find('[name^=txtSchedule]')[0].name = "txtSchedule" + counter;
formItem.find('[name^=txtScheduleAmountPay]')[0].name = "txtScheduleAmountPay" + counter;
$('.ScheduleextraPartTemplate').remove();
formItem.addClass('clone clone-1');
$('#Schedulecontainer').append(formItem);
});
$(document).on('click', '#ScheduleaddRow', function() {
var lens = counter++;
var cloneForm = $('.clone').last().clone();
var cloneNum = $('.clone').length;
cloneForm.removeClass('clone-'+cloneNum).addClass('clone-' + (cloneNum+1));
var date = cloneForm.find('[name^="txtSchedule"]').val();
cloneForm.find('[name^="txtSchedule"]').val(addOneMonth(date));
cloneForm.find('[name^=txtSchedule]')[0].name = "txtSchedule" + (lens+1);
cloneForm.find('[name^=txtScheduleAmountPay]')[0].name = "txtScheduleAmountPay" + (lens+1);
$('#Schedulecontainer').append(cloneForm);
})
function addOneMonth(date) {
var d = new Date( date );
d.setMonth( d.getMonth( ) + 1 );
return d.getFullYear() + '-' + ("0" + ((d.getMonth() + 1))).slice(-2) + '-' + ("0" + (d.getDate())).slice(-2);
}

TypeError: tempTable is null

I'm writing a script that prompts you to enter a low temperature and a high one. When you click add temperatures, it displays todays date, low temp, and high temp, and the average of low temps and high temps. Each time you enter these temps, the previous date before the last is displayed with those temps and the averages. When I try to run the code I get this: TypeError: tempTable is null. Any suggestions?
(function() {
//Array to hold temp data
var temperatures = new Array();
// function which updates the array
function addTemp() {
var lowTemp = document.getElementById("lowTemp").value;
var highTemp = document.getElementById("highTemp").value;
if (lowTemp.length === 0 || highTemp.length === 0) {
alert("Valid low and high temperatures must be entered!");
} else {
document.getElementById("output").style.display = "block";
// Add new temperatures to the array
// Current date
var d = new Date();
if (temperatures.length == 0) {
// Current date if it is 1st temperature
temperatures.push(new Array(d.getMonth(), d.getDate(), d.getFullYear(), lowTemp, highTemp));
} else {
// 1 day before last date
newDate = temperatures[temperatures.length - 1][1] - 1;
temperatures.push(new Array(d.getMonth(), newDate, d.getFullYear(), lowTemp, highTemp));
}
// Create the output table
var tempTable = document.getElementById("tempTable");
tempTable.innerHTML = "<tr><th>Date</th><th>Low Temperatures</th><th>High Temperatures</th></tr>";
// Loop over the array and create the table
// Also calculate the averages
var avgLow = 0;
var avgHigh = 0;
temperatures.forEach(function(entry) {
var newRow = document.createElement('tr');
newRow.innerHTML = '<td>' + entry[0] + '/' + entry[1] + '/' + entry[2] + '</td><td align="right">' + entry[3] + '</td><td align="right">' + entry[4] + '</td>';
tempTable.appendChild(newRow);
avgLow += parseInt(entry[3]);
avgHigh += parseInt(entry[4]);
});
// Add the row for average
avgLow /= temperatures.length;
avgHigh /= temperatures.length;
avgLow = avgLow.toFixed(1)
avgHigh = avgHigh.toFixed(1)
var newRow = document.createElement('tr');
newRow.innerHTML = '<td>Averages</td><td align="right">' + avgLow + '</td><td align="right">' + avgHigh + '</td>';
tempTable.appendChild(newRow);
//Add row for lowest temp
var minTemp = Math.min.apply(lowTemp.value);
var key = lowTemp.indexOf(d);
var newRow = document.createElement('tr');
newRow.innerHTML = '<td colspan="3"> The lowest temp of' + minTemp + 'occured on' + key + '</td>';
tempTable.appendChild(newRow);
}
return false;
}
function init() {
'use strict';
document.getElementById('theForm').onsubmit = addTemp;
} // End of init() function.
window.onload = init;
})();

The error means that when your code executed at that time temptable was not set possibly because your JS code is rendering prior to DOM element loaded.
var tempTable = document.getElementById("tempTable");
Also execute init() in DomContentLoaded instead of window.onload.
document.addEventListener("DOMContentLoaded", function(event) {
init();
});

Why is line break being written as a string?

I am trying to write a program that submits text on my website and I am having a lot of trouble trying to do a line break after the text because break line is being written as a string.
var main = function() {
var today = new Date();
var month = parseInt(today.getMonth() + 1);
var day = parseInt(today.getDate());
var year = parseInt(today.getFullYear());
$(".btn").click(function() {
var post = $(".status-box").val();
$("<li>").text(post + "<br>" + month + "/" + day + "/" + year).prependTo(".posts");
$(".status-box").val("");
$(".counter").text("140");
$(".btn").addClass("disabled");
});
$(".status-box").keyup(function() {
var postlength = $(this).val().length;
var charactersLeft = 140 - postlength;
$(".counter").text(charactersLeft);
if (charactersLeft < 0) {
$(".btn").addClass("disabled");
} else if (charactersLeft === 140) {
$(".btn").addClass("disabled");
} else {
$(".btn").removeClass("disabled");
}
});
$(".btn").addClass("disabled");
};
$(document).ready(main);

You are using .text() which will ALWAYS html-encode the text provided...use .html() instead
$("<li>").html(post + "<br>" + month + "/" + day + "/" + year).prependTo(".posts");

Creating a local variable to keep track of months on a calendar in javascript.

Here I have below a full html page for a calendar creation, copy it over to see what it does.
I have two buttons below that can increment month by one. My problem is because I can instantiating var month= date.getMonth() at the top of the page, the global variable month only allows me to increment and decrement by 1, how can I let month be set as a local variable so I am able to increment to more than just 1. Here is the code: I'm sure copy paste will work:
Below I have posted my my button handlers to increase month/decrease month.
<script type="text/javascript">
printCalendar(year,month,divDestination);
function printCalendar(year,mth,divDestination){
var currentmonth = mth;
var myOutput=document.getElementById(divDestination)
myOutput.innerHTML=makeCalendar(year,mth)
}
function prevMonth(m){
m--;
var currentmonth = m;
alert(m);
if(m < 0)
{
m = 11;
year--;
}
printCalendar(year,currentmonth,divDestination);
}
function nextMonth(m){
m++;
var currentmonth = m;
if(m > 11)
{
m=0;
year++;
}
printCalendar(year,currentmonth,divDestination);
}
function test(div){
var myOutput=document.getElementById("divCalendar")
myOutput.innerHTML += eventmonth;
}
</script>
<div align="center" id="divCalendar"></div>
<div align="center" id="myButtons">
<input type="button" onclick="test('divCalendar')" value="Say hi" />
<input type="button" onclick="prevMonth(month,'divCalendar')" value="Previous"/>
<input type="button" onclick="nextMonth(month,'divCalendar')" value="Next" />
<input type="button" onclick="printCalendar(year,month,'divCalendar')" value="Reload Calendar" />
Here below is my makeCalendar function
var myDate = new Date();
var month = myDate.getMonth();
var year = myDate.getFullYear();
var divDestination="divCalendar";
function leapYear(yr) {
if (yr < 1000) yr+=1900
return((yr%4 == 0) && ((yr%100 == 0) || (yr%400 ==0)))
}
function startCol(width, height, color){
return('<TD WIDTH=' + width + ' HEIGHT=' + height + '>' + '<FONT COLOR="' + color + '">');
}
function getHoliday(monthSelected,theday)
{
monthSelected = monthSelected + 1
var holiday = ""
var HolidayName = new Array (1, 1, "New Year's Day",7, 1, "Canada Day",12, 25, "Christmas Day",12, 26, "Boxing Day", 2,14,"Valentine's Day")
for(var index = 0; HolidayName.length >= index; index++)
{
if(HolidayName[index] == monthSelected && HolidayName[index+1] == theday)
{
holiday = HolidayName[index+2]
}
}
return holiday
}
function makeCalendar(yr, mth)
{
var monthSelected = mth
var months = new Array("Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec")
var days = new Array(31, leapYear(yr)?29:28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
var weekDays = new Array("Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat")
var mthSz = days[mth]
var mthName = months[mth]
var firstDyofMnth = new Date(yr, mth, 1)
var firstDay = firstDyofMnth.getDay() + 1
var numRows = Math.ceil((mthSz + firstDay-1)/7)
var mthNameHeight = 50
var borderWidth = 2
var cellSpacing = 4
var cellHeight = 80
var hdrColor = "midnightblue"
var hdrSz = "+3"
var colWidth = 100
var dayCellHeight = 25
var dayColor = "black"
var dayCtr = 1
// Build the HTML Table
var txt = '<CENTER>'
txt += '<TABLE BORDER=' + borderWidth + ' CELLSPACING=' + cellSpacing + '>'
//Show Month Name and Year
txt += '<TH COLSPAN=7 HEIGHT=' + mthNameHeight + '>'
txt += '<FONT COLOR="' + hdrColor + '" SIZE=' + hdrSz + '>'
txt += mthName + ' ' + year + '</FONT>' + '</TH>'
// Show Days of the Week
txt += '<TR ALIGN="center" VALIGN="center">'
for (var dy = 0; dy < 7; ++dy) {
txt += startCol(colWidth, dayCellHeight, dayColor) + weekDays[dy] + '</FONT></TD>'
}
txt += '</TR>'
// Show Dates in Calendar
for (var row=1; row <= numRows; ++row)
{
txt += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col)
{
if (((col < firstDay) && (row==1)) || (dayCtr>mthSz))
{txt += '<TD BGCOLOR="Gainsboro"><BR></TD>'}
else
{
var event = getHoliday(monthSelected, dayCtr)
txt += '<TD HEIGHT=' + cellHeight + '><FONT COLOR="' + dayColor + '"> <B>'
txt += dayCtr
txt += '</B></FONT><BR>' + event + '</TD>'
dayCtr++;
}
}
txt += '</TR>'
}
// close all basic table tags and output txt string
txt += '</TABLE></CENTER>'
return txt
}

Lets try to trim this down further to the money bits. Here's basically what you are doing.
var month = new Date().getMonth()
var nextMonth = function(m) {
m++;
setMonthSomewhere(m);
};
nextMonth(month);
So what happens is that you pass your global, which is accessible everywhere anywhere, to the nextMonth() function. And function arguments basically declare a local variable, which is sets to the passed in value. You now have a global month variable set to 1, and a totally different m local to the nextMonth() function also set to 1. You then increment the local variable m to 2, which has no effect on the global variable.
Instead, simply don't pass it in. Manipulate the global directly.
var month = new Date().getMonth()
var nextMonth = function() {
month++;
setMonthSomewhere(month);
};
nextMonth();
Now nextMonth() increments the global month variable directly, changing it's value.

You are using the global variable month in your handler <input type="button" onclick="nextMonth(month,'divCalendar')" value="Next" /> but you never update that global variable.
Why not try removing the first argument from your nextMonth function and instead of using m you use month.
function nextMonth(){
month++;
if(month > 11)
{
month=0;
year++;
}
printCalendar(year,month,divDestination);
}
(note your usage of "currentMonth" variable is probably wrong too so I removed that)
But I think that your design is a little flawed - because you are using global variables and putting them on the global namespace, you will have a tough time if you ever need to render 2 calendars or if ever some other javascript wants to use the variable name "month" or "year".
EDIT (Adding a better solution)
I would recommend though that instead of passing in numbers to your function, that you pass an entire date object - because that will make the code a lot simpler.
function printCalendar(date, divDestination) {
var myOutput=document.getElementById(divDestination)
myOutput.innerHTML=makeCalendar(date.getFullYear(), date.getMonth());
}
function nextMonth(date, divDestination) {
date.setMonth(date.getMonth()+1);
printCalendar(date, divDestination);
}
function prevMonth(date, divDestination) {
date.setMonth(date.getMonth()-1);
printCalendar(date, divDestination);
}
Now because you passed a Date object, the nextMonth and prevMonth functions actually modify the object, so that next time you call the Date will be updated with the new month.
Here is a fiddle that shows the solution using a date object
Fiddle