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
Related
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();
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
For some reason I'm getting 8 forward slashes rendered on their own line after the header for my dynamically populated calendar. The basic code for it is below:
<script type="text/javascript">
function getCalendar() {
var now = new Date();
var thisMonth = now.getMonth();
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var month = months[now.getMonth()];
var thisYear = now.getFullYear();
var firstDay = new Date(thisYear, thisMonth, 1, 0, 0, 0, 0);
var firstDayOfWeek = firstDay.addDays(-firstDay.getDay()); // get the first date of the 5-week calendar
var calendar = '<header> <h1 class="month-year">' + month + ' ' + thisYear + '</h1> ';
calendar += '</header> <table> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> ';
var calMonth = new Array(6); // least amount that will contain an entire month every time
calMonth[0] = new Array(7); // each week contains 7 days
calMonth[1] = new Array(7);
calMonth[2] = new Array(7);
calMonth[3] = new Array(7);
calMonth[4] = new Array(7);
calMonth[5] = new Array(7);
for(var i = 0; i < 6; i++) {
for(var j = 0; j < 7; j++) {
calMonth[i][j] = new Date(firstDayOfWeek); // input each date for the calendar into the array
firstDayOfWeek = new Date(firstDayOfWeek.addDays(1));
}
}
for(var i = 0; i < 6; i++) {
calendar += '<tr>';
for(var j = 0; j < 7; j++) {
var currDate = new Date(calMonth[i][j]);
day = currDate.getDate();
if(day == now.getDate() && currDate.getMonth() == now.getMonth()) {
calendar += '<td class="moderate current-day">' + day + '</td>';
} else if(currDate < now) {
calendar += '<td class="event heavy"><s>' + day + '</s></td>';
} else if(currDate.getDay() >= 5) {
calendar += '<td class="light">' + day + '</td>/';
} else if(currDate.getMonth() > now.getMonth() && currDate.getYear() == now.getYear()
|| currDate.getMonth() < now.getMonth() && currDate.getYear() < now.getYear()) {
calendar += '<td class="event moderate next-month">' + day + '</td>';
} else if(currDate.getMonth() < now.getMonth() && currDate.getYear() == now.getYear()
|| currDate.getMonth() > now.getMonth() && currDate.getYear() > now.getYear()) {
calendar += '<td class="event heavy prev-month">' + day + '</td>';
} else { calendar += '<td class="event light">' + day + '</td>'; }
}
calendar += '</tr>';
}
document.getElementById('calendar').innerHTML = calendar;
}
Date.prototype.addDays = function (n) {
var time = this.getTime();
var changedDate = new Date(time + (n * 24 * 60 * 60 * 1000));
this.setTime(changedDate.getTime());
return this;
}
</script>
When it renders to the <div class='calendar' id='calendar'></div>, for some reason it populates //////// on the line directly below the header, which currently renders August 2015.
I don't have anything between the header and the body of the table and I also do not have anything in the actual div until the calendar is rendered (which is during the onload event). An image of it is rendered below:
Additionally, an in-progress version with current styling can be viewed at this website.
Can anyone help me solve this mystery?
Thanks,
-C§
You had a stray forward slash inside your for loop after the tag. It is removed below.
<script type="text/javascript">
function getCalendar() {
var now = new Date();
var thisMonth = now.getMonth();
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var month = months[now.getMonth()];
var thisYear = now.getFullYear();
var firstDay = new Date(thisYear, thisMonth, 1, 0, 0, 0, 0);
var firstDayOfWeek = firstDay.addDays(-firstDay.getDay()); // get the first date of the 5-week calendar
var calendar = '<header> <h1 class="month-year">' + month + ' ' + thisYear + '</h1> ';
calendar += '</header> <table> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> ';
var calMonth = new Array(6); // least amount that will contain an entire month every time
calMonth[0] = new Array(7); // each week contains 7 days
calMonth[1] = new Array(7);
calMonth[2] = new Array(7);
calMonth[3] = new Array(7);
calMonth[4] = new Array(7);
calMonth[5] = new Array(7);
for(var i = 0; i < 6; i++) {
for(var j = 0; j < 7; j++) {
calMonth[i][j] = new Date(firstDayOfWeek); // input each date for the calendar into the array
firstDayOfWeek = new Date(firstDayOfWeek.addDays(1));
}
}
for(var i = 0; i < 6; i++) {
calendar += '<tr>';
for(var j = 0; j < 7; j++) {
var currDate = new Date(calMonth[i][j]);
day = currDate.getDate();
if(day == now.getDate() && currDate.getMonth() == now.getMonth()) {
calendar += '<td class="moderate current-day">' + day + '</td>';
} else if(currDate < now) {
calendar += '<td class="event heavy"><s>' + day + '</s></td>';
} else if(currDate.getDay() >= 5) {
calendar += '<td class="light">' + day + '</td>';
} else if(currDate.getMonth() > now.getMonth() && currDate.getYear() == now.getYear()
|| currDate.getMonth() < now.getMonth() && currDate.getYear() < now.getYear()) {
calendar += '<td class="event moderate next-month">' + day + '</td>';
} else if(currDate.getMonth() < now.getMonth() && currDate.getYear() == now.getYear()
|| currDate.getMonth() > now.getMonth() && currDate.getYear() > now.getYear()) {
calendar += '<td class="event heavy prev-month">' + day + '</td>';
} else { calendar += '<td class="event light">' + day + '</td>'; }
}
calendar += '</tr>';
}
document.getElementById('calendar').innerHTML = calendar;
}
Date.prototype.addDays = function (n) {
var time = this.getTime();
var changedDate = new Date(time + (n * 24 * 60 * 60 * 1000));
this.setTime(changedDate.getTime());
return this;
}
</script>
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
I had html table with 31 rows and 4 table columns I am trying to write javascript(Jquery) to bind first column with dates of the current month.
This is my code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
var table = document.getElementById("myTable")
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1)
for (var i = 0; i < 16; i++) {
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerText = myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getYear();
myDate.setDate(myDate.getDate() + 1)
row.appendChild(cell);
table.tBodies[0].appendChild(row);
}
});
</script>
</head>
<body>
<table id="myTable"></table>
</body>
</html>
Here's a solution that also breaks the loop in case we're dealing with a shorter month (e.g. in April, the table will not display 31/4/2013):
$(function() {
var table = document.getElementById("myTable")
var myDate = new Date();
var month = myDate.getMonth() + 1;
var firstOfMonth = new Date();
firstOfMonth.setDate(1);
for (var i = 0; i < 31; i++) {
myDate.setDate(firstOfMonth.getDate() + i);
if (myDate.getMonth() + 1 != month) break;
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerText = formatDate(myDate, dateFormat);
row.appendChild(cell);
table.tBodies[0].appendChild(row);
}
});
Link to jsfiddle
Note: the OP mentions javascript as the 1st option (jQuery only in backets), that's why I left the code in plain js (with the exception of the DOM ready wrapper).
In case that you want a solution that fully independent of jQuery, bind the DOM content load event as described in this SO post
I suppose that your question is related to this question.
In other words, you are looking for a Javascript function that should add to an empty table one row for each day of the current month; each row should have four columns named "Date", "Start Time", "End Time" and "Hour Type" and the first column ("Date") should contain a text input with a date in the format "dd/mm/yyyy".
If so, here is my solution:
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// See https://stackoverflow.com/questions/4881938/javascript-calculate-number-of-days-in-month-for-a-given-year
Date.prototype.daysInMonth = function(year, month) {
var monthStart = new Date(year, month, 1);
var monthEnd = new Date(year, month + 1, 1);
var monthLength = Math.round((monthEnd - monthStart) / (1000 * 60 * 60 * 24));
var mm = ((month + 1) < 10) ? ('0' + (month + 1)) : (month + 1);
var ret = new Array();
for (var i = 1; i <= monthLength; i++) {
var dd = (i < 10) ? ('0' + i) : i;
ret.push(dd + '/' + mm + '/' + year);
}
return ret;
};
function addRows(table, dates) {
var idx = 1;
for (var i in dates) {
table.append('<tr>'+
'<td><input name="date'+idx+'" id="date'+idx+'" class="date" value="'+dates[i]+'"></td>'+
'<td><input name="startTime'+idx+'" id="startTime'+idx+'"></td>'+
'<td><input name="endTime'+idx+'" id="EndTime'+idx+'"></td>'+
'<td>'+
'<select name="hourType'+idx+'" id="hourType'+idx+'">'+
'<option value="">Please select</option>'+
'<option value="1">Regular</option>'+
'<option value="2">Overtime</option>'+
'</select>'+
'</td>'+
'</tr>');
idx++;
}
}
$(function() {
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth();
var dates = myDate.daysInMonth(year, month);
var table = $("#myTable").find("tbody");
addRows(table, dates);
});
</script>
</head>
<body>
<form>
<table id="myTable">
<thead>
<tr>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Hour Type</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
</body>
</html>
Obviously, the table may also have less than 31 rows, depending on the number of days of the current month.
You are trying to append to the tbody but you didn't defined one. Change HTML to
<table id="myTable"><tbody></tbody></table>
And if you already have rows and cells, you want just to prepend the new cells
for (var i = 0; i < 16; i++) {
var cell = document.createElement("td");
cell.innerText = myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getFullYear();
myDate.setDate(myDate.getDate() + 1)
$(table).find('tr').eq(i).prepend(cell);
}
Try this out :- http://jsfiddle.net/adiioo7/9fQxq/
Use
table.appendChild(row);
instead of
table.tBodies[0].appendChild(row);
Here is a working jsFiddle.
The way I would use :
var d = new Date(); // get current date
var currentMonth = d.getMonth(); // save current month
d.setDate(1); // set date to first day of current month
// (...) create your table header
// create 31 rows
for(var i=1; i<=31; i++) {
var line = $(document.createElement('tr'));
if(d.getMonth() == currentMonth) {
// add the date to the first column
line.append('<td>'+dateToDMY(d)+'</td>')
.append('<td></td>')
.append('<td></td>')
.append('<td></td>');
} else {
// in case you always want to have 31 rows, whatever the month
line.append('<td colspan="4" class="empty"> </td>');
}
$('#myTable').append(line); // append the line to the table
d.setDate(d.getDate() + 1); // increase the date
}
/*
* Format Date : dd/mm/yyyy
* Based on Adrian Maire work
* http://stackoverflow.com/a/10685571/1238019
*/
function dateToDMY(date) {
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getFullYear();
return '' + (d <= 9 ? '0' + d : d) + '/' + (m<=9 ? '0' + m : m) + '/' + y;
}
Note that using setDate function will automaticaly update the date month with an out of range day (then you don't have to care about leap years)
If I understood your question correctly than you want to bind the first column with dates in current month? Fiddle
$(document).ready(function () {
// Get today date
var d = new Date();
//Get Days of Month
var n = new Date(d.getYear(), d.getMonth()+1, 0).getDate();
//Run loop for number of days
for (var i = 1; i <= n; i++) {
//Create row data
var row = '<tr><td>'+ i + "/" + (d.getMonth() + 1) + "/" + d.getFullYear()+'</td><td><td/><td><td/><td><td/></tr>';
// Append row data to table
$('#myTable').append(row);
}
});
You question is not very clear.. but From your code what I understood is that you are creating table 16 rows in which column 1 has date from (CURRENT_DATE - 1) to (CURRENT_DATE+14).
I used template to render table rows. Update the templates as you like to render other columns.
DEMO: http://jsfiddle.net/nLQ7q/3/
$(document).ready(function ($) {
var table = $("#myTable")
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1);
var rowTmpl = '<tr><td>{DATE}</td><td> </td><td> </td><td> </td></tr>';
var rows = [];
for (var i = 0; i < 16; i++) {
var row = rowTmpl.replace('{DATE}', myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getYear());
myDate.setDate(myDate.getDate() + 1)
rows.push(row);
}
table.html(rows.join(''));
});
A little bit fancy version here with a date picker http://jsfiddle.net/nLQ7q/4/
You can tryout this: FIDDLE
<table id="myTable"></table>
Mind it, you don't have tbody in your markup, so i put that and used the below jquery
-JQUERY-:
jQuery(document).ready(function ($) {
var table = $("#myTable");
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1)
for (var i = 0; i < 16; i++) {
var row = $("<tr>");
var cell = $("<td>");
myDate.setDate(myDate.getDate() + 1)
cell.text(myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getFullYear());
row.append(cell);
table.find('tbody').append(row);
}
$('#myTable').find('tr').each(function (i, v) {
$(this).append('<td/><td/><td/>');
$('td:not(:first)', this).text(i + 1);
});
});
At each row in the tr filled first td with dates and created other tds with some default text.
I have comeup with this : FIDDLE
$(function ($) {
var table = $("#myTable")
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1);
for (var i = 0; i < 16; i++)
{
var row = $('<tr/>');
var cell = $('<td/>');
cell.text
(myDate.getDate() +
"/" +
(myDate.getMonth() + 1) +
"/" +
(1900 + myDate.getYear()));
myDate.setDate(myDate.getDate() + 1);
row.append(cell);
table.append(row);
}
});
The value of to[0] is changing dynamically due to a javascript calender. In this code, change event is not working and I don't know...why so???
Jquery Code is:
$(document).ready(function() {
$("input[name='to[0]']").change( function() {
var b1 = $("input[name='to[0]']").val();
alert(b1);
});
});
HTML for this field is:
<td >
<input type="text" size="12" name="to[0]" value="To" readonly="readonly" />
<a class="datepicker" href="#"><img alt="Pick a date" src="js/date.gif" border="0" width="17" height="16" /></a>
</td>
This is date.js file for calender
var datePickerDivID = "datepicker";
var iFrameDivID = "datepickeriframe";
var dayArrayShort = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa');
var dayArrayMed = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var dayArrayLong = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
var monthArrayShort = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var monthArrayMed = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var monthArrayLong = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
// these variables define the date formatting we're expecting and outputting.
// If you want to use a different format by default, change the defaultDateSeparator
// and defaultDateFormat variables either here or on your HTML page.
var defaultDateSeparator = "/"; // common values would be "/" or "."
var defaultDateFormat = "dMy" // valid values are "mdy", "dmy", and "ymd"
var dateSeparator = defaultDateSeparator;
var dateFormat = defaultDateFormat;
function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat, dtSep)
{
var targetDateField = document.getElementsByName(dateFieldName).item(0);
// if we weren't told what node to display the datepicker beneath, just display it
// beneath the date field we're updating
if (!displayBelowThisObject)
displayBelowThisObject = targetDateField;
// if a date separator character was given, update the dateSeparator variable
if (dtSep)
dateSeparator = dtSep;
else
dateSeparator = defaultDateSeparator;
// if a date format was given, update the dateFormat variable
if (dtFormat)
dateFormat = dtFormat;
else
dateFormat = defaultDateFormat;
var x = displayBelowThisObject.offsetLeft;
var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;
// deal with elements inside tables and such
var parent = displayBelowThisObject;
while (parent.offsetParent) {
parent = parent.offsetParent;
x += parent.offsetLeft;
y += parent.offsetTop ;
}
drawDatePicker(targetDateField, x, y);
}
/**
Draw the datepicker object (which is just a table with calendar elements) at the
specified x and y coordinates, using the targetDateField object as the input tag
that will ultimately be populated with a date.
This function will normally be called by the displayDatePicker function.
*/
function drawDatePicker(targetDateField, x, y)
{
var dt = getFieldDate(targetDateField.value );
// the datepicker table will be drawn inside of a <div> with an ID defined by the
// global datePickerDivID variable. If such a div doesn't yet exist on the HTML
// document we're working with, add one.
if (!document.getElementById(datePickerDivID)) {
// don't use innerHTML to update the body, because it can cause global variables
// that are currently pointing to objects on the page to have bad references
//document.body.innerHTML += "<div id='" + datePickerDivID + "' class='dpDiv'></div>";
var newNode = document.createElement("div");
newNode.setAttribute("id", datePickerDivID);
newNode.setAttribute("class", "dpDiv");
newNode.setAttribute("style", "visibility: hidden;");
document.body.appendChild(newNode);
}
// move the datepicker div to the proper x,y coordinate and toggle the visiblity
var pickerDiv = document.getElementById(datePickerDivID);
pickerDiv.style.position = "absolute";
pickerDiv.style.left = x + "px";
pickerDiv.style.top = y + "px";
pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block");
pickerDiv.style.zIndex = 10000;
// draw the datepicker table
refreshDatePicker(targetDateField.name, dt.getFullYear(), dt.getMonth(), dt.getDate());
}
/**
This is the function that actually draws the datepicker calendar.
*/
function refreshDatePicker(dateFieldName, year, month, day)
{
// if no arguments are passed, use today's date; otherwise, month and year
// are required (if a day is passed, it will be highlighted later)
var thisDay = new Date();
if ((month >= 0) && (year > 0)) {
thisDay = new Date(year, month, 1);
} else {
day = thisDay.getDate();
thisDay.setDate(1);
}
// the calendar will be drawn as a table
// you can customize the table elements with a global CSS style sheet,
// or by hardcoding style and formatting elements below
var crlf = "\r\n";
var TABLE = "<table cols=7 class='dpTable'>" + crlf;
var xTABLE = "</table>" + crlf;
var TR = "<tr class='dpTR'>";
var TR_title = "<tr class='dpTitleTR'>";
var TR_days = "<tr class='dpDayTR'>";
var TR_todaybutton = "<tr class='dpTodayButtonTR'>";
var xTR = "</tr>" + crlf;
var TD = "<td class='dpTD' onMouseOut='this.className=\"dpTD\";' onMouseOver=' this.className=\"dpTDHover\";' "; // leave this tag open, because we'll be adding an onClick event
var TD_title = "<td colspan=5 class='dpTitleTD'>";
var TD_buttons = "<td class='dpButtonTD'>";
var TD_todaybutton = "<td colspan=7 class='dpTodayButtonTD'>";
var TD_days = "<td class='dpDayTD'>";
var TD_selected = "<td class='dpDayHighlightTD' onMouseOut='this.className=\"dpDayHighlightTD\";' onMouseOver='this.className=\"dpTDHover\";' "; // leave this tag open, because we'll be adding an onClick event
var xTD = "</td>" + crlf;
var DIV_title = "<div class='dpTitleText'>";
var DIV_selected = "<div class='dpDayHighlight'>";
var xDIV = "</div>";
// start generating the code for the calendar table
var html = TABLE;
// this is the title bar, which displays the month and the buttons to
// go back to a previous month or forward to the next month
html += TR_title;
html += TD_buttons + getButtonCode(dateFieldName, thisDay, -1, "<") + xTD;
html += TD_title + DIV_title + monthArrayLong[ thisDay.getMonth()] + " " + thisDay.getFullYear() + xDIV + xTD;
html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, ">") + xTD;
html += xTR;
// this is the row that indicates which day of the week we're on
html += TR_days;
for(i = 0; i < dayArrayShort.length; i++)
html += TD_days + dayArrayShort[i] + xTD;
html += xTR;
// now we'll start populating the table with days of the month
html += TR;
// first, the leading blanks
for (i = 0; i < thisDay.getDay(); i++)
html += TD + " " + xTD;
// now, the days of the month
do {
dayNum = thisDay.getDate();
TD_onclick = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');\">";
if (dayNum == day)
html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD;
else
html += TD + TD_onclick + dayNum + xTD;
// if this is a Saturday, start a new row
if (thisDay.getDay() == 6)
html += xTR + TR;
// increment the day
thisDay.setDate(thisDay.getDate() + 1);
} while (thisDay.getDate() > 1)
// fill in any trailing blanks
if (thisDay.getDay() > 0) {
for (i = 6; i > thisDay.getDay(); i--)
html += TD + " " + xTD;
}
html += xTR;
// add a button to allow the user to easily return to today, or close the calendar
var today = new Date();
var todayString = "Today is " + dayArrayMed[today.getDay()] + ", " + monthArrayMed[ today.getMonth()] + " " + today.getDate();
html += TR_todaybutton + TD_todaybutton;
html += "<button class='dpTodayButton' onClick='refreshDatePicker(\"" + dateFieldName + "\");'>this month</button> ";
// html += "<button class='dpTodayButton' onClick='updateDateField(\"" + dateFieldName + "\");'>close</button>";
html += xTD + xTR;
// and finally, close the table
html += xTABLE;
document.getElementById(datePickerDivID).innerHTML = html;
// add an "iFrame shim" to allow the datepicker to display above selection lists
adjustiFrame();
}
/**
Convenience function for writing the code for the buttons that bring us back or forward
a month.
*/
function getButtonCode(dateFieldName, dateVal, adjust, label)
{
var newMonth = (dateVal.getMonth () + adjust) % 12;
var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
if (newMonth < 0) {
newMonth += 12;
newYear += -1;
}
return "<button class='dpButton' onClick='refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ");'>" + label + "</button>";
}
/**
Convert a JavaScript Date object to a string, based on the dateFormat and dateSeparator
variables at the beginning of this script library.
*/
function getDateString(dateVal)
{//alert(dateVal );
var dayString = "00" + dateVal.getDate();
var monthString = "00" + (dateVal.getMonth()+1);
dayString = dayString.substring(dayString.length - 2);
monthString = monthString.substring(monthString.length - 2);
switch (dateFormat) {
case "dmy" :
return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
case "ymd" :
return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
case "mdy" :
return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
default :
return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
}
}
/**
Convert a string to a JavaScript Date object.
*/
function getFieldDate(dateString)
{
var dateVal;
var dArray;
var d, m, y;
try {
dArray = splitDateString(dateString);
if (dArray) {
switch (dateFormat) {
case "dmy" :
d = parseInt(dArray[0], 10);
m = parseInt(dArray[1], 10) - 1;
y = parseInt(dArray[2], 10);
break;
case "ymd" :
d = parseInt(dArray[2], 10);
m = parseInt(dArray[1], 10) - 1;
y = parseInt(dArray[0], 10);
break;
case "mdy" :
default :
d = parseInt(dArray[1], 10);
m = parseInt(dArray[0], 10) - 1;
y = parseInt(dArray[2], 10);
break;
}
dateVal = new Date(y, m, d);
} else if (dateString) {
dateVal = new Date(dateString);
} else {
dateVal = new Date();
}
} catch(e) {
dateVal = new Date();
}
return dateVal;
}
/**
Try to split a date string into an array of elements, using common date separators.
If the date is split, an array is returned; otherwise, we just return false.
*/
function splitDateString(dateString)
{
var dArray;
if (dateString.indexOf("/") >= 0)
dArray = dateString.split("/");
else if (dateString.indexOf(".") >= 0)
dArray = dateString.split(".");
else if (dateString.indexOf("-") >= 0)
dArray = dateString.split("-");
else if (dateString.indexOf("\\") >= 0)
dArray = dateString.split("\\");
else
dArray = false;
return dArray;
}
/**
Update the field with the given dateFieldName with the dateString that has been passed,
and hide the datepicker. If no dateString is passed, just close the datepicker without
changing the field value.
Also, if the page developer has defined a function called datePickerClosed anywhere on
the page or in an imported library, we will attempt to run that function with the updated
field as a parameter. This can be used for such things as date validation, setting default
values for related fields, etc. For example, you might have a function like this to validate
a start date field:
*/
function datePickerClosed(dateField)
{
var dateObj = getFieldDate(dateField.value);
var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
if (dateField.name == "StartDate") {
if (dateObj < today) {
// if the date is before today, alert the user and display the datepicker again
alert("Please enter a date that is today or later");
dateField.value = "";
document.getElementById(datePickerDivID).style.visibility = "visible";
adjustiFrame();
} else {
// if the date is okay, set the EndDate field to 7 days after the StartDate
dateObj.setTime(dateObj.getTime() + (7 * 24 * 60 * 60 * 1000));
var endDateField = document.getElementsByName ("EndDate").item(0);
endDateField.value = getDateString(dateObj);
}
}
}
function updateDateField(dateFieldName, dateString)
{//alert('hi');
var x=dateString.split('-');
var month;
if(x[1]==01)
{
month=monthArrayMed[0];
}
else if(x[1]==02)
{
month=monthArrayMed[1];
}
else if(x[1]==03)
{
month=monthArrayMed[2];
}
else if(x[1]==04)
{
month=monthArrayMed[3];
}
else if(x[1]==05)
{
month=monthArrayMed[4];
}
else if(x[1]==06)
{
month=monthArrayMed[5];
}
else if(x[1]==07)
{
month=monthArrayMed[6];
}
else if(x[1]==08)
{
month=monthArrayMed[7];
}
else if(x[1]==09)
{
month=monthArrayMed[8];
}
else if(x[1]==10)
{
month=monthArrayMed[9];
}
else if(x[1]==11)
{
month=monthArrayMed[10];
}
else if(x[1]==12)
{
month=monthArrayMed[11];
}
dateString=x[0]+'-'+month+'-'+x[2];
var targetDateField = document.getElementsByName (dateFieldName).item(0);
if (dateString)
targetDateField.value = dateString;
var pickerDiv = document.getElementById(datePickerDivID);
pickerDiv.style.visibility = "hidden";
pickerDiv.style.display = "none";
adjustiFrame();
targetDateField.focus();
// after the datepicker has closed, optionally run a user-defined function called
// datePickerClosed, passing the field that was just updated as a parameter
// (note that this will only run if the user actually selected a date from the datepicker)
if ((dateString) && (typeof(datePickerClosed) == "function"))
{
datePickerClosed(targetDateField);
//alert(typeof(datePickerClosed));
}
//alert(typeof(datePickerClosed));
}
function adjustiFrame(pickerDiv, iFrameDiv)
{
// we know that Opera doesn't like something about this, so if we
// think we're using Opera, don't even try
var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
if (is_opera)
return;
// put a try/catch block around the whole thing, just in case
try {
if (!document.getElementById(iFrameDivID)) {
// don't use innerHTML to update the body, because it can cause global variables
// that are currently pointing to objects on the page to have bad references
//document.body.innerHTML += "<iframe id='" + iFrameDivID + "' src='javascript:false;' scrolling='no' frameborder='0'>";
var newNode = document.createElement("iFrame");
newNode.setAttribute("id", iFrameDivID);
newNode.setAttribute("src", "javascript:false;");
newNode.setAttribute("scrolling", "no");
newNode.setAttribute ("frameborder", "0");
document.body.appendChild(newNode);
}
if (!pickerDiv)
pickerDiv = document.getElementById(datePickerDivID);
if (!iFrameDiv)
iFrameDiv = document.getElementById(iFrameDivID);
try {
iFrameDiv.style.position = "absolute";
iFrameDiv.style.width = pickerDiv.offsetWidth;
iFrameDiv.style.height = pickerDiv.offsetHeight ;
iFrameDiv.style.top = pickerDiv.style.top;
iFrameDiv.style.left = pickerDiv.style.left;
iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;
iFrameDiv.style.visibility = pickerDiv.style.visibility ;
iFrameDiv.style.display = pickerDiv.style.display;
} catch(e) {
}
} catch (ee) {
}
}
Use this code instead of your code:
$("input:text[name=to[0]]").blur( function() {
var b1 = $(this).val();
alert(b1);
});
As shown on http://jsfiddle.net/RxsL8/1/ change event is never fired for an input if its value is changed dinamycally (and not by explicit user action)
so you would probably need to use some internal function/callbacks provided by your datepicker plugin, or add some code to run when a date is chosen
after your edit:
your input is updated on updateDateField function, right here
if (dateString)
targetDateField.value = dateString;
so add here a callback function