Develop Reference

JQuery - Add todays date to div when checkbox is checked

I'm trying to add todays date inside a div when a checkbox has been checked. I can get this to work in the console but not on the page. I don't get any console errors when I run the script in the console or whne the page is loaded. I've tried adding:
$( document ).ready(function()
to the script, but I get an error. Here is my script:
function GetTodayDate() {
var tdate = new Date();
var dd = tdate.getDate(); //yields day
var MM = tdate.getMonth(); //yields month
var yyyy = tdate.getFullYear(); //yields year
var currentDate = dd + "/" + ( MM+1) + "/" + yyyy;
$('input[name=cb-switch]').is(':checked') {
$('div#startDate').html(currentDate).appendTo(document);
}
};
Any help appreciated. Thanks in advance.

this is a simple example .you can use this code.
I hope is useful for you.
<script type="text/javascript">
$(document).ready(function()
{
$('#myid').change(function()
{
if ($(this).prop('checked'))
{
var tdate = new Date();
var dd = tdate.getDate(); //yields day
var MM = tdate.getMonth(); //yields month
var yyyy = tdate.getFullYear(); //yields year
var currentDate = dd + "/" + ( MM+1) + "/" + yyyy;
$('div#startDate').append("<p>"+currentDate+"</p>");
}
else {
alert("You have elected to turn off checkout history."); //not checked
}
});
});
</script>
myid is id of your checkbox

In your document ready you are missing the click event handler for changes.
$('input[name=cb-switch]').click(GetTodayDate)
IF you only want to call the function on load do
$(document).ready({
GetTodayDate();
});

It looks like there is a minor issue, is(':checked') a Boolean value. and since it is not under if statement it might be saying unexpected {. so change that line of code to:
if($('input[name=cb-switch]).is(':checked')) {
$('div#startDate').html(currentDate);
}
And it will work when you call your method.
To call your method do this:
$("input[name=cb-switch]").change(function(){
GetTodayDate();
});
Hope this helps.
Cheers!!!

Previous selected date doesn't get unselected in calendar

So I only want to have one selected date on my calendar UI, however when I press a new date, the old one is still lit up, and so I can press all the days on my calendar and they'll all light up.
for(var dayCounter = 1; dayCounter <= currMonthDays; dayCounter++){
tempListItem = document.createElement("li");
tempListItem.innerHTML = dayCounter;
$(tempListItem).addClass("day");
//add a hidden element to the day that we can access when we click on it
var temp = months[currMonth] +"/" + dayCounter +"/" + currFullYear;
$(tempListItem).append("<div class = 'hidden'>" + temp + "</div>");
if(dayCounter == date.getDate() && currMonth == date.getMonth()){
tempListItem.setAttribute("id", "current-day");
}
ulDays.appendChild(tempListItem);
}
$(document).on("click", ".day", function()
{
var date = $(this).children(".hidden").text();
console.log(date);
$(document.getElementById("current-day")).removeAttr("#current-day");
$(this).attr("id", "current-day");
});
After removing the current-day class, shouldn't the element lose its CSS?

It looks like you have a small big when you try to remove the id from the current-day. removeAttr expects the name of an attribute. In this case, that attribute would be id, so try this:
$(document.getElementById("current-day")).removeAttr("id");

Add the date on the top of each group of chats like in what's app

I'm trying to add date on top of the messages sent and receive on a particular day in my chat app. For instance:
-----Yesterday-----
mike: Hello
Jan: Hi
-----Today----
Eunice: Help! I've been trying to do this all day
Fid: Me too. Lets ask for help.
I have written the JS to calculate the date and tried to append to the top of the messages sent daily.
Here is what I've done:
add the day of the week as a classname to messages sent on the day
use jQuery to select the first element with the classname (day of the week).
Firbase is the bomb
Yes for sure
I'm still learning it though
append html tag e.g Today to the first div
Here is my JS
last10Comments.on('child_added', function (snapshot) {
var comment = snapshot.val();
var newDiv = $("<div/>").addClass("comment ").attr("id",snapshot.name()).appendTo("#comments");
FB.api("/" + comment.userid, function(userdata) {
comment.name = userdata.name;
newDiv.html(Mustache.to_html($('#template').html(), comment));
});
var outputTime = $("<span/>").addClass("timespan "+ te.getDayName() +"").attr("id",yiu).appendTo("#comments").text(Timeformat());
var tim = $('.'+ te.getDayName() +'')[0];
$('#'+tim+'').prepend( "<p>Test</p>" );
})
This JS actually gets the first element. but the probelem is, it prepend the text based on the number of element with the same class. i.e if 5 divs contain same classname, it prepends it 5 times. e.g Wednesday Wednesday Wednesday Wednesday Wednesday

I have no way to try out, so I am just guessing here, try this:
last10Comments.on('child_added', function (snapshot) {
(function (te) {
var comment = snapshot.val();
var newDiv = $("<div/>").addClass("comment ").attr("id", snapshot.name()).appendTo("#comments");
FB.api("/" + comment.userid, function (userdata) {
comment.name = userdata.name;
newDiv.html(Mustache.to_html($('#template').html(), comment));
});
var outputTime = $("<span/>").addClass("timespan " + te.getDayName() + "").attr("id", yiu).appendTo("#comments").text(Timeformat());
var tim = $('.' + te.getDayName() + '')[0];
$('#' + tim + '').prepend("<p>Test</p>");
})(te);
})
Let me know it if works. If it fixes your problem, then I will explain in comments.

JQuery Using Cell Data to Reform Cells

I'm using jquery, as well as the CSVtoTable (plugin here: https://code.google.com/p/jquerycsvtotable/ ) plugin to convert large CSV files into tables that I can manipulate. I need to attach links relevant to each row.
I need to convert the text in one of these rows to add a link to a pdf. The problem is I can't seem to modify the strings. I'm using data like that found here: http://jsfiddle.net/bstrunk/vaCuY/297/
The file names generated by my system can't be easily edited, so I'm stuck using these formats:
423-1.pdf
So I need to convert two strings from tables formatted like so:
4/23/2013
1
to drop the year, as well as the slashes, and add a '-' and then the extra digit.
I'm able to grab the table data, I just can't seem to manipulate the variables with either the .replace or .substr
$(document).ready(function () {
$("tr td:nth-child(5)").each(function () {
var $docket = $('td=eq(5)');
var $td = $(this);
var $dataDate = $td.substr(0, $td.lastIndexOf("/"));
var $newDataDate = $dataDate.replace("/", "");
$td.html('<a html="./docs/' + $newDataDate.text() + '-' + $docket.text() + '.pdf">' + $td.text() + '</a>');
});
});
(edit): Sample table data:
<tr><td>13CI401111</td><td>22</td><td>Name1</td><td>Name2</td><td>4/23/2013</td><td>1</td></tr>
<tr><td>13CI401112</td><td>22</td><td>Name1</td><td>Name2</td><td>4/24/2013</td><td>2</td></tr>

First set the table id properly:
<table id="CSVTable">
Then use the right selector to select the 5th cell in each row:
$("#CSVTable tr td:nth-child(5)") //note that we need to tell Jquery to look for the cells inside `CSVTable` otherwise it will search the whole document
dollar sign is not required at the beginning of each variable and doesn't have any significance, you can remove it.
This wont work:
var $docket = $('td=eq(5)');
it's telling jquery to look for 6th cell but where? you should specify the parent like:
$("#CSVTable tr td:nth-child(6)");
but we only need the next cell to the one already selected in each function, so a better approach would be to use next() method which will select the next td directly:
$(this).next('td');
complete code:
$(document).ready(function () {
$("#CSVTable tr td:nth-child(5)").each(function () {
var td = $(this),
docket = td.next('td').text(),
dataDate = td.text(),
newDate = dataDate.substr(0, dataDate.lastIndexOf('/')).replace("/", '');
td.html('' + dataDate + '');
});
});
Demo

Bstrunk, try this :
$(function() {
$("tr").each(function () {
var $tr = $(this);
var $td_date = $tr.find('td').eq(4);
var $td_docket = $tr.find('td').eq(5);
var dateArr = $td_date.text().split("/");
$td_date.html('<a html="./docs/' + dateArr[0] + dateArr[1] + '-' + $td_docket.text() + '.pdf">' + $td_date.text() + '</a>');
});
});

Inserting Dates into HTML Table Cells

I am wanting to have a series of dates (mainly Month, Day, Year) displayed within a vertical arrangement of table cells on a web page. The first date needs to be the current date minus one day, with the next date in the sequence be the current date, The remaining dates need to incrementally be one day in future out to 16 days.
Can someone provide help me figure out how to do this? I have looked at and understand a Javascript to manipulate and display a single date (add or subtract) but am unable to get that date in a cell as well as figure out how to display the other multiple dates mentioned above in a HTML table.

Try this:
HTML
<table id="myTable"></table>
JavaScript
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);
}

Did you try myDate.toString() or myDate.toDateString()?
What you need to do is have some variables holding a date... Like this
var myDate = new Date();
Put whatever date in it that you fancy, then do this.
myDate.toDateString()
You can create your table in a loop in javascript and fill it with dates.
Did this help?

Option 1:
You can use write the output into the document like:
<table>
<tr>
<td><script type="text/javascript">document.write(mydate);</script></td>
...
</tr>
Option 2: generate the markup in javascript and then inject it into the DOM:
var markup = '<table>\
<tr>\
<td>' + mydate + '</td>\
</tr>\
...
</table>';
document.getElementById('contentDiv').innerHTML = markup;
Where you have a div element in your page:
<div id="contentDiv"></div>