Develop Reference

Using computer date and adding a day indicator

I have been trying to display the following "on this 4th day of January in the year 2022"
using javascript on an HTML page
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const d = new Date();
var dayn = d.getDay()
var dayString;
if (dayn == 1) {
dayString = "</b><sup>st</sup>"
} else if (dayn == 3) {
dayString = "</b><sup>rd</sup>"
} else if (dayn >= 4) {
dayString = "</b><sup>th</sup>"
} else {
dayString = "</b><sup>nd</sup>"
}
var dateStr = "<b>" + dayn + dayString + "</b> day of<b> " + monthNames[d.getMonth()] + "</b> in the year <b>" + d.getFullYear(); + "</b>"
document.write(dateStr);
but for some reason it is displaying today as the 2nd and not the 4th and
where I want to display ie. 4th March 2022 (today +89 days) it is failing to do so...
So the aim is to on the first line display:
"on this 4th day of January in the year 2022"
and on the next line
"no later than 3rd day of March 2022"

You have to use d.getDate() instead of d.getDay()
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const d = new Date();
var dayn = d.getDate();
var endDate = d.setDate(dayn + 89);
var daym = new Date(endDate).getDate();
var dayString;
if (dayn == 1) {
dayString = "</b><sup>st</sup>"
} else if (dayn == 3) {
dayString = "</b><sup>rd</sup>"
} else if (dayn >= 4) {
dayString = "</b><sup>th</sup>"
} else {
dayString = "</b><sup>nd</sup>"
}
var endDayString;
if (daym == 1) {
endDayString = "</b><sup>st</sup>"
} else if (daym == 3) {
endDayString = "</b><sup>rd</sup>"
} else if (daym >= 4) {
endDayString = "</b><sup>th</sup>"
} else {
endDayString = "</b><sup>nd</sup>"
}
var endDateStr = "<b>" + daym + endDayString + "</b> day of<b> " + monthNames[d.getMonth()] + "</b> in the year <b>" + d.getFullYear(); + "</b>"
document.write(endDateStr);

const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const d = new Date();
var dayn = d.getDate();
var dayString;
if (dayn == 1) {
dayString = "</b><sup>st</sup>"
} else if (dayn == 3) {
dayString = "</b><sup>rd</sup>"
} else if (dayn >= 4) {
dayString = "</b><sup>th</sup>"
} else {
dayString = "</b><sup>nd</sup>"
}
var dateStr = "<b>" + dayn + dayString + "</b> day of<b> " + monthNames[d.getMonth()] + "</b> in the year <b>" + d.getFullYear(); + "</b>"
document.write(dateStr);

Display Current date with additional 30 days of calculation - JS

I am trying to display current date by finding string and replacing with current date, its working fine, but additionally I want to display another date where if string has some comma seprated value then it will add to the current date and will display accodrdingly, So lets say if I add (,30) in string it will add 30 days additional in current date and display
var setCurrentDate = function() {
var disclaimerStr = $(".dynamic-date").html(),
currDateStr = "{currentdate}",
date = new Date(),
months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
currDate =
months[date.getMonth()] +
" " +
date.getDate() +
", " +
date.getFullYear(),
newDisclaimerStr;
if (disclaimerStr.indexOf(currDateStr) != -1) {
newDisclaimerStr = disclaimerStr.replace(currDateStr, currDate);
$(".dynamic-date").html(newDisclaimerStr);
}
};
setCurrentDate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-date">
<b>Current Date</b> : {currentdate} <br><br>
<b>Extended Date</b> : {currentdate,30} <br><br>
</div>

Try this code :
var setCurrentDate = function() {
var disclaimerStr = $(".dynamic-date").html(),
currDateStr = "{currentdate}",
date = new Date(),
months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
currDate =
months[date.getMonth()] +
" " +
date.getDate() +
", " +
date.getFullYear(),
newDisclaimerStr;
if (disclaimerStr.indexOf(currDateStr) != -1) {
newDisclaimerStr = disclaimerStr.replace(currDateStr, currDate);
$(".dynamic-date").html(newDisclaimerStr);
}
var reg = new RegExp(/\{currentdate(,(\d+))\}/);
var currDateStr2 = '{currentdate,30}'; // you need to change here!
var days = parseInt(reg.exec(currDateStr2)[2], 10);
console.log(days) //30
var date2 = new Date();
date2.setDate(date2.getDate() + days);
console.log(date2) // "2019-04-27T09:13:00.789Z"
};
setCurrentDate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-date">
<b>Current Date</b> : {currentdate} <br><br>
<b>Extended Date</b> : {currentdate,30} <br><br>
</div>

How to, via javascript, display the content according to the variable?

I am trying to create an HTML page where if the month is picked, the correct dates will display in a table.
I have a function where it gets today's month and the user is able to switch between the months, but I am unsure on how I can get all of the days.
I don't need the numbers to be displayed, just the right amount of empty table rows/table data for the month's days.
So for example, when the webpage is selected, and today's month is februari, a empty table with the current days will display: i.e, 29 empty tables will show up - and the same if you decide to scroll to another day.
var month = new Date();
var index = month.getMonth();
var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
document.getElementById("todayField").innerHTML = months[month.getMonth()];
function next() {
var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
var nextMonth = index + 1 > 11 ? 0 : index + 1;
index = nextMonth
document.getElementById("todayField").innerHTML = months[nextMonth];
}
function prev() {
var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
var nextMonth = index - 1 < 0 ? 11 : index - 1;
index = nextMonth
// console.log(nextMonth)
document.getElementById("todayField").innerHTML = months[nextMonth];
}
document.getElementById("prev").addEventListener("click", function() {
prev();
})
document.getElementById("next").addEventListener("click", function() {
next();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Click to change day</p>
<button type="button" name="btnPrev" onclick="prev()"><</button>
<button type="button" name="btnNext" onclick="next()">></button>
<p id="todayField"></p>
<p>You can find the days below</p>
</body>
</html>
Thanks in advance! :)

I would create a function returning the number of days of selected month.
https://stackoverflow.com/a/47188148/3793309 has what it needs:
function daysInMonth(month, year) {
var days;
switch (month) {
case 1: // Feb, our problem child
var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
days = leapYear ? 29 : 28;
break;
case 3: case 5: case 8: case 10:
days = 30;
break;
default:
days = 31;
}
return days;
},
you can call this function with the index of your month e.g. March:
[...]
var months = ["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober", "November", "December"];
var index = months.indexOf("Mars");
var year = 2018;
var count = daysInMonth(index, year);
this should be enough to apply to your needs.
hth

I've added a function the draws the table, and left you the implementation of a function that receives the month's name as input and returns the number of days in it.
Note that I've added another <p> element with the table already ready inside of it.
You can use #jayjay bricksoft's answer to help you with that.
Good luck!
var month = new Date();
var index = month.getMonth();
var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
document.getElementById("todayField").innerHTML = months[month.getMonth()];
// Draws a table for the current month
drawTable(daysInMonth(index, 2018));
function next() {
var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
var nextMonth = index + 1 > 11 ? 0 : index + 1;
index = nextMonth;
document.getElementById("todayField").innerHTML = months[nextMonth];
drawTable(daysInMonth(index, 2018));
}
function prev() {
var months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
var nextMonth = index - 1 < 0 ? 11 : index - 1;
index = nextMonth;
// console.log(nextMonth)
document.getElementById("todayField").innerHTML = months[nextMonth];
drawTable(daysInMonth(index, 2018));
}
function daysInMonth(month, year) {
var days;
switch (month) {
case 1: // Feb, our problem child
var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
days = leapYear ? 29 : 28;
break;
case 3:
case 5:
case 8:
case 10:
days = 30;
break;
default:
days = 31;
}
return days;
}
function drawTable(daysInMonth) {
var cellsToDraw = daysInMonth;
var table = document.getElementById("table");
table.innerHTML = "";
for (r = 0; r < (daysInMonth / 7); r++) {
var newRow = document.createElement("tr");
table.appendChild(newRow);
for (c = 0; c < 7 && cellsToDraw > 0; c++) {
var newCell = document.createElement("td");
newRow.appendChild(newCell);
newCell.innerHTML = " ";
cellsToDraw--;
}
}
}
td {
border: solid 1px black;
width: 30px;
height: 30px;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Click to change day</p>
<button type="button" name="btnPrev" onclick="prev()"><</button>
<button type="button" name="btnNext" onclick="next()">></button>
<p id="todayField"></p>
<p>You can find the days below</p>
<div>
<table id="table"></table>
</div>
</body>
</html>

How to Populate An Array of Month Number In jQuery - Javascript

Can you please take a look at this demo and let me know how I can dynamically populate the number of each month for current year in jQuery or JavaScript?
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var daysInMonth = [];
var d = new Date();
var n = d.getMonth();
for (var i = 0; i < monthNames.length; i++) {
daysInMonth.push(d.getMonth());
}
console.log(daysInMonth);

var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var daysInMonth = [];
for (var i = 0; i < monthNames.length; i++) {
var year = 2014;
var month = new Date(monthNames[i] + " 01 "+ year).getMonth() + 1;
daysInMonth.push(new Date(year, month, 0).getDate());
}
console.log(daysInMonth);
DEMO http://jsfiddle.net/0mj2cxmt/7/

#Sam Battat's answer works too, but for a simple snippet of code that works on any year when called you could try this:
var thisDay = new Date();
var thisYear = thisDay.getYear();
var feb29th = new Date(thisYear, 1, 29);
var febDays = ((feb29th.getMonth() === 1) ? 29 : 28);
var dayCounts = [31,febDays,31,30,31,30,31,31,30,31,30,31];
Notes:
The number of days is hard coded for all months except February since they don't change
The feb29th variable above will actually become March 1st on years that don't have 29 days (e.g. non-leap years) and thus the month won't be "1"... defaulting the number of days back to 28
Update:
After running this perf test http://jsperf.com/leap-year-check it has become apparent that the "crafty" check for a leap year performance is nowhere near as good as basic math checks.
Thus I'd consider this to be even more efficient.
var thisDay = new Date();
var thisYear = thisDay.getYear();
var febDays = 28;
if((thisYear % 4 == 0) && (thisYear % 100 != 0) || (thisYear % 400 == 0)){
febDays = 29;
}
var dayCounts = [31,febDays,31,30,31,30,31,31,30,31,30,31];

get month names between 2 dates

I have to two dates from and to. I want to get all of the month names between these two dates.
Following is my code
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
function diff(from, to) {
var datFrom = new Date('1 ' + from);
var datTo = new Date('1 ' + to);
var arr = monthNames.slice(datFrom.getMonth(), datTo.getMonth() + 1);
}
above code works for following inputs
diff('September 2013', 'December 2013');
but it does not work for this
diff('September 2013', 'February 2014');
How can I make it work?

Mine is better: http://jsfiddle.net/kS73f/8/
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
function diff(from, to) {
var arr = [];
var datFrom = new Date('1 ' + from);
var datTo = new Date('1 ' + to);
var fromYear = datFrom.getFullYear();
var toYear = datTo.getFullYear();
var diffYear = (12 * (toYear - fromYear)) + datTo.getMonth();
for (var i = datFrom.getMonth(); i <= diffYear; i++) {
arr.push(monthNames[i%12] + " " + Math.floor(fromYear+(i/12)));
}
return arr;
}
console.log(diff('September 2013', 'March 2014'));

You're going to have to do a more manual method than slice. Here's a starting point you can determine how to handle cases as mentioned in comments.
function diff(from, to) {
var result = [];
var datFrom = new Date('1 ' + from);
var datTo = new Date('1 ' + to);
if(datFrom < datTo) {
var month = datFrom.getMonth();
var toMonth = datTo.getMonth() + 1 + ((datTo.getYear() - datFrom.getYear())*12); //toMonth adjusted for year
for(; month < toMonth; month++) { //Slice around the corner...
result.push(monthNames[month % 12]);
}
}
return result;
}
diff('September 2013', 'February 2014'); //=["September", "October", "November", "December", "January", "February"]

var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
function diff(from, to) {
var datFrom = new Date('1 ' + from);
var datTo = new Date('1 ' + to);
var arr;
if(datFrom > datTo) {
return diff(to, from);
}
var fromYear = datFrom.getFullYear();
var toYear = datTo.getFullYear();
if(fromYear === toYear) {
return monthNames.slice(datFrom.getMonth(), datTo.getMonth() + 1);
} else {
var arr = addYear(monthNames.slice(datFrom.getMonth(), new Date('1 December ' + fromYear)), fromYear);
for(var i = 1; i < (toYear - fromYear); i++) {
arr = arr.concat(addYear(monthNames, fromYear + i));
}
return arr.concat(addYear(monthNames.slice(new Date('1 January ' + fromYear).getMonth(), datTo.getMonth() + 1), toYear));
}
}
function addYear(arr, year) {
var updatedArr = [];
for(var i = 0; i < arr.length; i++) {
updatedArr[i] = arr[i] + ' ' + year;
}
return updatedArr;
}
Than try console.log(diff('September 2013', 'February 2015')) to test it.

The following modifies the original function as little as possible, if that helps the OP from a comprehension standpoint.
function diff(from, to) {
var datFrom = new Date('1 ' + from);
var datTo = new Date('1 ' + to);
var arr = monthNames.slice(datFrom.getMonth(), datTo.getMonth() + 1);
if (!arr.length) {
arr = monthNames.slice(datFrom.getMonth(), 12);
arr = arr.concat(monthNames.slice(0, datTo.getMonth() + 1));
}
return arr;
}
console.log(diff('December 2013', 'February 2014')); //["September", "October", "November", "December", "January", "February"]

Lazy answer:
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December",
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
function diff(from, to) {
var mFrom = new Date('1 ' + from).getMonth();
var mTo = new Date('1 ' + to).getMonth();
mTo = mTo < mFrom ? mTo + 12 : mTo;
return monthNames.slice(mFrom, mTo + 1);
}
alert(diff('September 2013', 'December 2013'));
alert(diff('September 2013', 'February 2014'));