We Keep Coding

Date format in HTML table

I am having trouble changing the date format in my HTML table. I want it to display as "9/1/22" but I am getting "Thu Sep 01 2022 16:55:58 GMT-0400 (Eastern Daylight Time)"
Here is my code:
function sampleFunction() {
var sh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
range = sh.getRange("E1").getValues();
var data = sh.getRange(range).getValues();
//var htmltable =[];
var TABLEFORMAT =
'cellspacing="2" cellpadding="2" dir="ltr" border="1" style="width:100%;table-layout:fixed;font-size:10pt;font-family:arial,sans,sans-serif;border-collapse:collapse;border:1px solid #ccc;font-weight:normal;color:black;background-color:white;text-align:center;text-decoration:none;font-style:normal;';
var htmltable = "<table " + TABLEFORMAT + ' ">';
for (row = 0; row < data.length; row++) {
htmltable += "<tr>";
for (col = 0; col < data[row].length; col++) {
if (data[row][col] === "" || 0) {
htmltable += "<td>" + "None" + "</td>";
} else if (row === 0) {
htmltable += "<th>" + data[row][col] + "</th>";
} else {
htmltable += "<td>" + data[row][col] + "</td>";
}
}
htmltable += "</tr>";
}
htmltable += "</table>";
Logger.log(data);
Logger.log(htmltable);
MailApp.sendEmail(Session.getActiveUser().getEmail(), "Daily report", "", {
htmlBody: htmltable,
});
}
Any help would be greatly appreciated

You can use the Date object to do that:
var today = new Date();
console.log(today.toLocaleDateString("en-US")); // 9/4/2022
I don't know in which column your date data (you need to post the data in data object) but lets say the date is in the first column then you can do this:
var data = [];
var TABLEFORMAT =
'cellspacing="2" cellpadding="2" dir="ltr" border="1" style="width:100%;table-layout:fixed;font-size:10pt;font-family:arial,sans,sans-serif;border-collapse:collapse;border:1px solid #ccc;font-weight:normal;color:black;background-color:white;text-align:center;text-decoration:none;font-style:normal;';
var htmltable = "<table " + TABLEFORMAT + ' ">';
for (var row = 0; row<data.length; row++){
var formattedDate = new Date(data[row][0]).toLocaleDateString("en-US")
htmltable += '<tr>';
for (var col = 0 ;col<data[row].length; col++){
if (data[row][col] === "" || 0) {htmltable += '<td>' + 'None' + '</td>';}
else {
if (row === 0) {
htmltable += '<th>' + data[row][col] + '</th>';
}
else if (col === 0) { htmltable += '<td>' + formattedDate + '</td>'}
else {
htmltable += '<td>' + data[row][col] + '</td>';
}
}
}
htmltable += '</tr>';
}
Note: I created local var data in example to make it compile. You should just use your own variables.

Edit table Javascript and corresponding dates

I have this table:
I'm trying to insert the events I have in my database in a certain way: basically what i would like is to let the code to check the name of the events in my database (blue square) and associate the cells (above the red line) where I add manually my events with the same name. And at that point add the hour difference (between startDate and endDate) in the corresponding day of the month.
This is the code that render the header of my table (where it takes the current month and add every days of that month):
function renderHead(div, start, end) {
var c_year = start.getFullYear();
var r_year = "<tr>";
var daysInYear = 0;
var c_month = start.getMonth();
var r_month = "<tr>";
var daysInMonth = 0;
var r_days = "<tr> <td id= 'event'> Eventi </td>";
for (start; start <= end; start.setDate(start.getDate() + 1)) {
if (start.getFullYear() !== c_year) {
r_year += '<td colspan="' + daysInYear + '">' + c_year + '</td>';
c_year = start.getFullYear();
daysInYear = 0;
}
daysInYear++;
if (start.getMonth() !== c_month) {
r_month += '<td colspan="' + daysInMonth + '">' + months[c_month] + '</td>';
c_month = start.getMonth();
daysInMonth = 0;
}
daysInMonth++;
r_days += '<td id="days">' + start.getDate() + '</td>';
}
r_days += " <td id='tot'> Totale </td> </tr>";
r_year += '<td colspan="' + (daysInYear) + '">' + months[c_month] + ' '+ c_year +'</td>';
r_year += "</tr>";
table = "<table id='tblData' border='1'>" + r_year + r_days + "</table>";
div.html(table);
}
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
renderHead($('div#table2'), new Date(firstDay), new Date(lastDay));
This is the function that get the events (blue square) and the difference between startDate and endDate from my database (and the tbody where i manually add the events):
function getEvents(year, month){
var currentEvents = $('#calendar').fullCalendar('clientEvents').filter(event =\> (new Date(event.start) \> firstDay && new Date(event.end) \<= lastDay));
for(i=0; i\<currentEvents.length; i++) {
if(currentEvents\[i\].nomeUtente == $("#nomeUtente").data('value')){
const start = new Date(currentEvents\[i\].start.\_i);
const end = new Date(currentEvents\[i\].end.\_i);
if (currentEvents\[i\].title == "Normali" || currentEvents\[i\].title == "Ferie"){
const milliseconds = Math.abs((end - start)-5400000);
var hours = milliseconds / 36e5;
}else{
const milliseconds = Math.abs(end - start);
var hours = milliseconds / 36e5;
}
if ($("#tblData tbody").length == 0) {
$("#tblData").append("\<tbody\>"+ "\<tr\>\<td id='norm'\>Normali\</td\>\</tr\>"+
"\<tr\>\<td id='stra'\>Straordinarie\</td\>\</tr\>"+
"\<tr\>\<td id='fer'\>Ferie\</td\>\</tr\>"+
"\<tr\>\<td id='mal'\>Malattia\</td\>\</tr\>"+
"\<tr\>\<td id='perm'\>Permesso\</td\>\</tr\>"+
"\<tr\>\<td id='sm'\>Smart Working\</td\>\</tr\>"+
"\<tr\>\<td id='tras'\>Trasferta\</td\>\</tr\>"+
"\<tr\>\<td id='anr'\>Assenze non retribuita\</td\>\</tr\>"+
"\<tr\>\<td id='alt'\>Altro\</td\>\</tr\>"+ "\</tbody\>");
}
$("#tblData tbody").append("\<tr\>" +
//"\<td\>" + currentEvents\[i\].title + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\<td\>" + hours + "\</td\>" +
"\</tr\>");
}
}
};
For reference, this is my database:
This is what I've been doing so far:
function getEvents(year, month){
var table = document.getElementById('tblData');
var currentEvents = $('#calendar').fullCalendar('clientEvents').filter(event => (new Date(event.start) > firstDay && new Date(event.end) <= lastDay));
for(i=0; i<currentEvents.length; i++) {
if(currentEvents[i].nomeUtente == $("#nomeUtente").data('value')){
const start = new Date(currentEvents[i].start._i);
const end = new Date(currentEvents[i].end._i);
if (currentEvents[i].title == "Normali" || currentEvents[i].title == "Ferie"){ //provato a mettere una condizione nel quale se Normali o Ferie togliere millisecondi se no no
const milliseconds = Math.abs((end - start)-5400000);
var hours = milliseconds / 36e5;
}else{
const milliseconds = Math.abs(end - start);
var hours = milliseconds / 36e5;
}
if ($("#tblData tbody").length == 0) {
$("#tblData").append("<tbody>"+ "<tr><td id='norm'>Normali</td></tr>"+
"<tr><td id='stra'>Straordinarie</td></tr>"+
"<tr><td id='fer'>Ferie</td></tr>"+
"<tr><td id='mal'>Malattia</td></tr>"+
"<tr><td id='perm'>Permesso</td></tr>"+
"<tr><td id='sm'>Smart Working</td></tr>"+
"<tr><td id='tras'>Trasferta</td></tr>"+
"<tr><td id='anr'>Assenze non retribuita</td></tr>"+
"<tr><td id='alt'>Altro</td></tr>"+ "</tbody>");
}
for (var r = 0, n = table.rows.length; r < n; r++) {
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
if(table.rows[r].cells[c].innerHTML == currentEvents[i].title){ //controlla contenuto cella se è uguale ad evento
$("#tblData tbody #days").append("<tr> <td>" + hours + "</td></tr>");
}else{
alert (table.rows[r].cells[c].innerHTML);
}
}
}
}
}
};
But it doesnt work :(

Copy Exact Dynamic Table and Values from one JSP to Another

I created a dynamic calendar, which consists of check boxes per day, and this will be populated, the calendar is being constructed when a specific year was selected on the drop-down box. I used JavaScript to construct the HTML table and jQuery's append to display it. My problem is that when this calendar was successfully drawn in the JSP, user will input values check boxes, and clicking a button will redirect to a new JSP (this will be a confirmation screen in where it will reflect the calendar created in the previous JSP, along with the check boxes input.)
Anyone could give me an idea on how to implement this?
My code for constructing the calendar:
// Retrieves the first day of the month (Zero-based.)
function getFirstDay(year, month) {
var firstDate = new Date(year, month, 1)
return firstDate.getDay()
}
// Retrieves the number of days of a specific month.
function getMonthLength(year, month) {
var oneDay = 1000 * 60 * 60 * 24
var thisMonth = new Date(year, month, 1)
var nextMonth = new Date(year, month + 1, 1)
var length = Math.ceil((nextMonth.getTime() - thisMonth
.getTime())
/ oneDay)
return length
}
// Draws the calendar of a specific month in a specific year.
function constructTable(month, year) {
var firstDay = getFirstDay(year, month);
var totalDays = getMonthLength(year, month);
var counter = 1;
var blankCounter = 0;
var done = false;
var months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
var propertyName = 'selected' + months[month];
var baseline = '<table class="outputTable" summary="Calendar_'
+ months[month]
+ '"><tr><th colspan="7">'
+ months[month]
+ '</th></tr><tr><th>Sun.</th><th>Mon.</th><th>Tue.</th><th>Wed.</th><th>Thu.</th><th>Fri.</th><th>Sat.</th></tr>';
for (var i = 0; i < 6; i++) {
if (i % 2 == 0) {
baseline += '<tr>';
} else {
baseline += '<tr class="gray">';
}
for (var j = 0; j < 7; j++) {
if (i == 0 && blankCounter < firstDay) {
blankCounter++;
baseline += '<td></td>';
continue;
}
if (counter == totalDays) {
done = true;
}
if (counter <= totalDays) {
var index = counter++
switch (j) {
case 0:
baseline += '<td class="daySunday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 1:
baseline += '<td class="dayMonday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 2:
baseline += '<td class="dayTuesday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 3:
baseline += '<td class="dayWednesday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 4:
baseline += '<td class="dayThursday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 5:
baseline += '<td class="dayFriday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 6:
baseline += '<td class="daySaturday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
}
} else {
baseline += '<td></td>';
}
}
baseline += '</tr>';
}
baseline += '</table>';
return baseline;
}

js window.open and print not working in google chrome

I am written a code something like this.. It is working fine in Mozilla Firefox where as in google chrome without writing any content in the document it is printing.. Please help me how to resolve this problem.
Suppose if I removed that printing statement then it is working fine but I need to print that window
function prepareInvoice(userDetails, courseId)
{
var a = "";
a = a+"<html><head><title>Invoice | Palle University</title>";
a = a + "<link href=\"../assets/css/bootstrap.css\" rel=\"stylesheet\" />";
//form=form+
a = a + "</head><body><header id=\"header\" class=\"navbar-fixed-top\"> <div class=\"container\" > <div class=\"row\" ><div class=\"col-lg-6 col-md-6 col-sm-6 col-xs-6 logo-wrapper\">";
a=a+" <div class=\"pulogo\"><label style=\"color:white\">Palle<sup>®</sup></label>University</div>";
a = a + "</div><div style=\"font-weight:bold;\" class=\"col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right\">Invoice</div></div></div></header>";
a = a + "<section id=\"about\" class=\"clearfix\">";
a = a + "<div class=\"container\" > <div class=\"row\" ><div class=\"col-lg-6 col-md-6 col-sm-6 col-xs-6\">";
a = a + "manish complex;<br>Mangammana palya main road;<br>Bommanahalli-560068;<br>Bangalore;Karnataka-India";
a = a + "</div><div class=\"col-lg-6 col-md-6 col-sm-6 col-xs-6\">";
a = a + "<b>Customer Details:</b><br>";
if (userDetails.Lastname != "")
a = a + "Last Name:" + userDetails.Lastname + "<br>";
if (userDetails.FirstName != "")
a = a + "First Name:" + userDetails.FirstName + "<br>";
if (userDetails.Address != "")
a += "address:" + userDetails.Address + "<br>";
if (userDetails.CityName != "")
a += "city:" + userDetails.CityName + "<br>";
if (userDetails.State != "")
a += "state:" + userDetails.State + "<br>";
if (userDetails.CountryName != "")
a += "Country:" + userDetails.CountryName + "<br>";
if (userDetails.Email != "")
a += "email:" + userDetails.Email + "<br>";
a = a + "</div></div></div>";
a = a + "<div class=\"container\" > <div class=\"row\"> <div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">";
a = a + "<table style=\"font-size:15px\" class=\"table table-responsive table-condensed table-striped table-hover no-margin text-center\"><thead><tr class=\"text-center\"><td>Course Name</td><td>Purchased On</td><td>Expires On</td><td>Amount</td></tr></thead><tbody>";
var cur_symbol='';
var amount=0;
for (i = 0; i < userDetails.LstCourses.length;i++)
{
if (courseId == userDetails.LstCourses[i].CourseId) {
var monthNames = ["jan", "feb", "march", "april", "may", "june",
"July", "aug", "sep", "oct", "nov", "dec"];
a = a + "<tr><td>" + userDetails.LstCourses[i].Course_displayname + "</td>";
var d = new Date(parseInt(userDetails.LstCourses[i].Paid_date.substr(6)));
var curr_date = d.getDate();
var curr_month = monthNames[d.getMonth()];
var curr_year = d.getFullYear();
var cur_symbol = '';
if (userDetails.LstCourses[i].Currency_code.toLowerCase() == "usd")
cur_symbol = "usd ";//"<i class=\"fa fa-usd\"></i>";
else if (userDetails.LstCourses[i].Currency_code.toLowerCase() == "inr")
cur_symbol = "inr ";//"<i class=\"fa fa-inr\"></i>";
a = a + "<td>" + curr_date + "-" + curr_month + "-" + curr_year + "</td>";
d = new Date(parseInt(userDetails.LstCourses[i].Expire_date.substr(6)));
curr_date = d.getDate();
curr_month = monthNames[d.getMonth()];
curr_year = d.getFullYear();
a = a + "<td>" + curr_date + "-" + curr_month + "-" + curr_year + "</td>";
amount = userDetails.LstCourses[i].Amount_paid;
a = a + "<td>" + cur_symbol + userDetails.LstCourses[i].Amount_paid + "</td></tr>";//display dollar or inr symbol.
//display the total amount based on the course id and a thank you ! message .
}
}
a = a + "<tr><td></td><td></td><td></td><td>Total: " + cur_symbol +" "+ amount + "</td></tr>";
a = a + "</tbody></table></div></div></div>";
a = a + "<div class=\"container\" > <div class=\"row\"> <div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center\">";
a = a + "Thank you !</div></div></div>";
//a = a + "<table><tr><td></td><td></td><td></td><td>Total:" + cur_symbol + amount + "</td></tr></table></div></div></div>";
a = a + "</body></html>";
//a.print();oUser.Lastname; oUser.Lastname;oUser.Address;
//oUser.Email; oUser.CityName; oUser.State; oUser.CountryName;
debugger;
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write(a);
mywindow.document.close();
mywindow.focus();
mywindow.print();
}

Try this for a div content
function printDivision() {
var printContents = document.getElementById('divId').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = "<div align='center' style='padding: 5%;' >"
+ printContents + "</div>";
window.print();
document.body.innerHTML = originalContents;
}

Datepicker in Javascript

What is the best way(pattern) to Create datepicker in Javascript.
I have created one using Singleton pattern, but am not satisfied.

You can just use jQuery UI Datepicker and forget about it.

1) Singleton Pattern
The Singleton pattern is often known as an "anti pattern", in other words only use it if absolutely necessary.
Is there a really good reason for all your calendars to use the same instance? I would guess not.
2) Javascript datepickers
I would recommend looking around for date picker libraries, or use jQuery.

I am a fan of http://jonathanleighton.com/projects/date-input (jQuery)
Lightweight and simple! :-)

CIC Kalender skript.
<script language="JavaScript" src="kalender.js"></script>
<script language="JavaScript">
var Singleton = new function Singleton()
{
var instance = this;
var count = 0;
var result = "";
var callBack = "";
var id = "vnd";
var d = new Date();
var days = new Array('So','Mo','Di','Mi','Do','Fr','Sa');
var months = new Array('Januar', 'Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');
var month = d.getMonth();
var date = d.getDate();
var day = d.getDay();
d.setDate(1);
var firstDay = d.getDay();
d.setDate(date);
var year = d.getFullYear();
Singleton.getInstance = function()
{
return instance;
}
this.toString = function()
{
return "[object Singleton]";
}
this.instanceMethod = function()
{
alert( "instance method called!" );
}
this.setCallBack = function(callBackFuncName) {
callBack = callBackFuncName;
}
this.getFormattedDate = function() {
return date + '.' + month + '.' + year;
}
this.getLength = function() {
switch(month){
case 1:
if ((year%4==0 &&
year%100!=0) ||
year%400==0)
return 29; // leap year
else
return 28;
case 3:
return 30;
case 5:
return 30;
case 8:
return 30;
case 10:
return 30
default:
return 31;
}
}
this.setDateVariable = function() {
day = d.getDay();
month = d.getMonth();
d.setDate(1);
firstDay = d.getDay();
d.setDate(date);
year = d.getFullYear();
}
this.writeCalendar = function() {
var calString = '<div id="calContainer" >';
calString += '<table id="cal' + id + '" cellspacing="0" width="200"' + ' style="border:1px black solid;">';
calString += '<tr><th colspan="7" class="month">' + months[month] + ' ' + year + '</th></tr>';
/*
* Row containing days of the week.
*/
calString += '<tr>';
for( var i = 0; i < days.length; i++ ) {
calString += '<th class="dayHeader">' + days[i] + '</th>';
}
calString += '</tr>';
/*
* Body of the Calendar.
*/
calString += '<tr>';
for(var j = 0; j < 42; j++ ) {
var displayNum = (j-firstDay+1);
if( j < firstDay ) {
calString += '<td class="empty"></td>';
} else if ( displayNum == date ) {
calString += '<td id="' + id +
'selected" class="date" ' +
'onClick="Singleton.getInstance().changeDate(this,\'' +
id + '\')">' + displayNum + '</td>';
} else if ( displayNum > length ) {
calString += '<td> </td>';
} else if(displayNum <= date) {
calString += '<td id="" class="days" ' +
id + '\')">' + displayNum + '</td>';
}
else {
calString += '<td id="" class="days" ' +
'onClick="Singleton.getInstance().changeDate(this,\'' +
id + '\')">' + displayNum + '</td>';
}
if(j%7==6){
calString += '</tr><tr>';
}
}
/*
* close the last number row
*/
calString += '</tr>';
/*
* the nav row
*/
calString += '<tr>';
calString += '<td class="nav" ' +
'style="text-decoration:underline;"' +
' onClick="Singleton.getInstance().changeMonth(-12,\'' + id +
'\')"><</td>';
calString += '<td class="nav" ' +
'onClick="Singleton.getInstance().changeMonth(-1,\'' + id +
'\')"><</td>';
calString += '<td class="month" ' +
'colspan="3"> </td>';
calString += '<td class="nav"' +
' onClick="Singleton.getInstance().changeMonth(1,\'' + id +
'\')">></td>';
calString += '<td class="nav" ' +
'style="text-decoration:underline;text-' +
'align:right;" onClick="Singleton.getInstance().changeMonth(12,\'' +
id + '\')">></td>';
calString += '</tr>';
calString += '</table>';
calString += '</div>';
result = calString;
return calString;
}
this.changeDate = function(td) {
var oDiv = document.getElementById(id + "selected");
oDiv.className = "days";
oDiv.id = "";
td.className = id + "selected";
td.id = id + "selected";
date = parseInt(td.innerHTML);
// Create new Date object.
selected_date = new Date();
selected_date.setDate(date);
selected_date.setMonth(month);
selected_date.setYear(year);
callBack(selected_date);
}
this.changeMonth = function(mo) {
d.setMonth(d.getMonth() + mo);
this.setDateVariable();
document.getElementById("vnd").innerHTML = this.writeCalendar();
}
Singleton.staticMethod = function()
{
count = count+1;
alert( "static method called!" + count);
}
var length = this.getLength();
return Singleton;
}
function init() {
Singleton.getInstance().setCallBack(setDates);
document.getElementById("vnd").innerHTML = Singleton.getInstance().writeCalendar();
}
function setDates(date) {
//alert(date);
}
<div id="vnd" style="font-family: Calibri, Verdana">This is a Date DIV</div>