Develop Reference

Make Calendar as 2D Array

I am trying to make a calendar as a HTML table. It should be a single 2D array with each row as a week and each column as a day. The Week start needs to be a Monday and there must be blank spaces for overlapping months.
The Issue is the Start Days are wrong for every month and differently wrong each time. January 1st 2019 was a Tuesday so i expect the Start Day to be a 2, however i get 4 (a Thursday), the same issue is for every other month.
I am using functions to get the amount of days in the month and the day the month starts on
function month_days(month, year) {return new Date(year, month, 0).getDate();}
function month_start(month, year) {return new Date(year, month, 0).getDay();}
My problem is with the month_start function.
//date is an date object generated on the fly using date.setMonth() and date.setYear();
var month_2D_arr = gen_days(date.getMonth()+1, date.getFullYear());
function gen_days(month, year){
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var checking = new Date(year, month, 0);
console.log(monthNames[checking.getMonth()]);
console.log(checking.getFullYear());
var days = mondays(month, year);
var start = monstart(month, year);
console.log("start="+start);
}
The outputs are as follows (I induced the actual day names manually) compared to what the are suppose to be (to the right of "||").
My Results || Actual Days
January = 4 - Thursday || January = 2 - Tuesday
February = 4 - Thursday || February = 5 - Friday
March = 0 - Sunday || March = 5 - Friday
April = 2 - Tuesday || April = 1 -Monday
May = 5 - Friday || May = 3 - Wednesday
June = 0 - Sunday || June = 6 - Saturday
July = 3 - Wednesday || July = 1 - Monday
August = 6 - Saturday || August = 4 - Thursday
September = 1 - Monday || September = 0 - Sunday
October = 4 - Thursday || October = 2 - Tuesday
November = 6 - Saturday || November = 5 - Friday
December = 2 - Tuesday || December = 0 - Sunday
Example console log:
December //(month)
2019 //(year)
start=2 //(start day)
I have also switched set/getFullYear() to set/getYear() accounting for the 1900 difference and checking still. There is no difference to it.

Been playing with a calendar for giggle this week, so perhaps I can offer some help.
JS uses Sunday(0) as the first day of the week, yet you'd also like to use Monday(1)
You can create a date object that corresponds to the first day of any given month and then from that, you can deduce the day of the week of the 1st.
The approach I've employed was to create a table with 7 rows and 7 columns. The first row only contains th elements with the day names in em.
The next 42 table-cells can then be collected into an array and the correct date assigned to them. For that, I create a 42 element array using the brilliantly-named function test3.
Here's a screen:
function getFirstDayOfMonth(zeroBasedMonthNum, fullYear)
{
var monthNames = ['January','Febuary','March','April','May','June','July','August','September','October','November','December'];
var dateStr = `${monthNames[zeroBasedMonthNum]} 1, ${fullYear}, 00:00:00`;
var monthStart = new Date( dateStr );
return monthStart;
}
function daysInMonth(zeroBasedMonthNumber)
{
var days = [31,28,31,30,31,30, 31,31,30, 31,30,31 ];
return days[zeroBasedMonthNumber];
}
function MonthDay(number,isThisMonth)
{
this.day = number;
this.thisMonth = isThisMonth;
return this;
}
function test3(monthIndex, year)
{
var firstDay = getFirstDayOfMonth(monthIndex, year).getDay();
if (firstDay == 0)
firstDay = 6;
else
firstDay--;
var daysFromLastMonth = firstDay;
var result = [];
var daysInLastMonth = daysInMonth(monthIndex-1);
var first = daysInLastMonth - daysFromLastMonth + 1;
console.log(first);
for (var i=0; i<daysFromLastMonth; i++)
{
//result.push(first+i);
result.push( new MonthDay(first+i, false) );
}
for (var i=1; i<= daysInMonth(monthIndex); i++)
//result.push( i );
result.push( new MonthDay(i,true) );
var daysDone = result.length;
var daysToGo = (6*7) - daysDone;
for (var i=1; i<=daysToGo; i++)
//result.push( i );
result.push( new MonthDay(i,false) );
return result;
}

d3 chart's tooltip fails to parse February 2009 correctly

I have an area chart that parses dates for the tooltip correctly -- except when it comes to February 2009.
Here's a Plunker demonstrating the problem: http://plnkr.co/edit/Yl4hUDVin2sZedu016Wm?p=preview
Here, I think, is the problematic code:
var mousex = d3.mouse(this);
mousex = mousex[0] ;//+ 3; //7
var invertedx = xScale.invert(mousex);
var invertedxmo = xScale.invert(mousex);
var invertedxyr = xScale.invert(mousex);
function getMonth(date) {
var month = date.getMonth() + 1;
return month < 10 ? '0' + month : '' + month;
}
invertedx = ("" + (invertedx.getMonth() + 1)).slice(-2) + '/' + invertedx.getFullYear();
var selected = (d.values);
for (var k = 0; k < selected.length; k++) {
dates[k] = selected[k].x
dates[k] = ("" + (dates[k].getMonth() + 1)).slice(-2) + '/' + dates[k].getFullYear();
}
invertedxmo = ("" + (invertedxmo.getMonth() + 1)).slice(-2) ;
var selectedmo = (d.values);
for (var m = 0; k < selectedmo.length; k++) {
dates[m] = selectedmo[m].x
dates[m] = ("" + (dates[m].getMonth() + 1)).slice(-2) ;
}
invertedxyr = invertedxyr.getFullYear();
mousedate = dates.indexOf(invertedx);
pro = d.values[mousedate].y
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
I've tried changing slice(-2), and that fixes the problem for February 2009, but it also creates a new problem for parsing December dates for every year.
Can anyone demonstrate how to fix this?
Edit/Update:
Interestingly, when I tinkered with the chart's date range by changing line 16 from var startDate = d3.time.month.offset(new Date(), -108); to var startDate = d3.time.month.offset(new Date(), -119);, then February 2009 parses just fine — but February 2008 throws an error! Same, too, if I narrow the date range by changing line 16's offset value to -98: February 2010 throws an error, but all subsequent Februaries parse just fine, as do all other dates. (Obviously, if you use the slider, instead, to narrow the date range, the error will still only occur in the first February that was displayed when the chart initially loaded, before the slider was moved.)
So it seems that it's always the first February on the chart that produces this error, no matter whether the date range beings in 2008, 2009, 2010, etc. All subsequent Februaries after the first are parsed just fine.

There is no issue with the code in the mouseover code. The issue lies in the DATE
Today's date is 30th and the way you're generating the start-date is:
d3.time.month.offset(new Date(), -108);
i.e. it starts with Sun Nov 30 2008 16:46:58 GMT-0500 (EST) and goes on the following way:
Sun Nov 30 2008 16:52:32 GMT-0500 (EST)
Tue Dec 30 2008 16:52:32 GMT-0500 (EST)
Fri Jan 30 2009 16:52:32 GMT-0500 (EST)
Mon Mar 02 2009 16:52:32 GMT-0500 (EST)
Thu Apr 02 2009 16:52:32 GMT-0400 (EDT)
.....
As it couldn't find a 30th in February 2009, it ends up picking up March 2nd 2009 and from there onwards, every 2nd day of the month is picked which will surely include all Februarys. (in the createDatesArr function)
One approach would be to start from the 1st day of the month.
Relevant code:
var currentDate = new Date();
var firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
var startDate = d3.time.month.offset(firstDay, -108);
Updated Plunkr
Hope this helps. :)

Edit JavaScript (Tomorrow's date)

I am trying to edit some JavaScript code which basically shows tomorrow's date. However for Friday and weekends (Friday, Saturday and Sunday) it should show the following Monday's date.
Here is the code I have:
var date = new Date(); // timezone
date.setDate(date.getDate() + 1); // move to tomorrow
date.setUTCHours(11,0,0,0); // set time using UTC(GMT) timezone
document.getElementById("next-shipment").textContent = date.toLocaleString();
JSFiddle
For example let say today is Tuesday, November 4, 2015. The javascript code should show "November 5, 2015"---> in this format.
On Friday, Saturday,and Sunday the code should show: Next Monday's date: November 9, 2015
The code should work all year around.

Try this:
var today = new Date(); // timezone
document.getElementById("result").innerHTML = "<br/>Today's next day is: " + FormatDate(GetNextDay(today));
function GetNextDay(date){
date.setDate(date.getDate() + 1); // move to next day.
switch(date.getDay()) {
case 0: //Sunday
case 6: //Saturday
date = GetNextDay(date);
}
return date;
}
function FormatDate(date){
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
return months[date.getMonth()] + " " + date.getDate() + ", " + date.getFullYear();
}
function TestDate(){
var date = new Date(document.getElementById("TestDate").value);
document.getElementById("result").innerHTML += "<br/>Selected day's next day is: " + FormatDate(GetNextDay(date));
}
<input type="text" id="TestDate" value="November 06, 2015" />
<input type="button" value="Get Next Day" onclick="TestDate();" />
<div id="result"></div>
The idea is fairly simple:
The first two lines and the TestDate() function at the end are only for testing and you don't need them in your code.
The job is mainly done by the GetNextDay() function. You give it a date and it calculates and give you back the next date (skipping the weekend). It does that in two steps:
1- First it adds one day to the given date date.setDate(date.getDate() + 1);.
2- It checks the day of the new date date.getDay(). If it is 6 or 0 (Saturday or Sunday) it calls itself again date = GetNextDay(date); which means it will add one more day to the date. This concept of a function calling itself is called "recursion" in programming. When it reaches Monday, it will stop calling itself and return the date.
The only way to calculate the next day properly is by adding one day to the date. This utilizes JavaScript's Date library which knows how to do the calculation. For example, it knows that adding one day to "November 30" is "December 1", NOT "November 31". If we try to do that manually by adding 1 to number of the day: 30 + 1 = 31, but "November 31" is not a valid date. To solve this issue, we will need to write a library similar to the one that JavaScript has. Obviously, this is like reinventing the wheel and there is no point in that.

The Date constructor also has a function called getDay() which returns a integer between 0 and 6 (0 = Sunday, 6 = Saturday). You can use this to detect Friday(0), Saturday(6), Sunday(0) and omit them.
Here is a demo that alerts you if it's the weekend:
var myDate = new Date();
myDate.setFullYear(2015);
myDate.setMonth(11);
myDate.setDate(6);
if(myDate.getDate() == 5 || myDate.getDay() == 6 || myDate.getDay() == 0) alert('Weekend!');
document.write(myDate);
To find the next day, pass the Date constructor a time & it will do the work for you. You will need to create an array however to format it in the way you want November, 5 2015.
JS:
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var tomDate = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var day = tomDate.getDate();
var month = monthNames[tomDate.getMonth()];
var year = tomDate.getFullYear()
var d = new Date();
var n = d.getDay();
if(n == 5){
var fromFri = n + 4;
document.write("<b>" + month + " " + fromFri + ", " + year + "</b>");
}else if (n == 6){
var fromSat = n + 3;
document.write("<b>" + month + " " + fromSat + ", " + year + "</b>");
}else if (n == 0) {
var fromSun = n + 2;
document.write("<b>" + month + " " + fromSun + ", " + year + "</b>");
}else{
document.write("<b>" + month + " " + day + ", " + year + "</b>");
}
Updated: CODEPEN DEMO

`date.setMonth` causes the month to be set too high if `date` is at the end of the month

A Date object’s getMonth() method seems to have a bug. Assuming the Date d is 2013-01-31, I attempt to set the month on d like this:
const d = new Date(); // 2013-01-31
d.setMonth(8);
console.log(d.getMonth());
The result is 9. Why? I tested this both in Chrome and Firefox.
I found out that when it’s the 31st, 30th, or 29th of a month, setting the date to a month that has a fewer number of days causes getMonth to return the wrong value.

Let's break this down:
var d = new Date(); // date is now 2013-01-31
d.setMonth(1); // date is now 2013-02-31, which is 3 days past 2013-02-28
x = d.getMonth(); // what to do, what to do, 3 days past 2013-02-28 is in March
// so, expect x to be March, which is 2
This is only an issue when the day value of d is greater than the maximum number of days in the month passed to setMonth(). Otherwise, it works as you'd expect.

The simplest solution to this is to add a second argument to setMonth:
var d = new Date();
d.setMonth(8,1);
d.getMonth(); //outputs 8
https://www.w3schools.com/jsref/jsref_setmonth.asp
Date.setMonth(month,day)
day: Optional. An integer representing the day of month
Expected values are 1-31, but other values are allowed:
0 will result in the last day of the previous month-1 will result in the day before the last day of the previous month
If the month has 31 days:
32 will result in the first day of the next month
If the month has 30 days:
32 will result in the second day of the next month

Months in JavaScript are represented from 0-11. Month 1 would be February which only has 28/29 days, so when you set the month to 1, it tries to auto-correct the date to March to make a date that makes sense (since Feb 31st, makes no sense). Try it out by using the toDateString function to see what I mean:
var d = new Date('2013/01/31');
d.setMonth(2);
console.log(d.toDateString()); // outputs Match 3rd, 2013
A little weird perhaps, but not buggy.

In javascript month is start from 0. Assume today is 02/04/2012, when you setMonth(1) it will try to set to feb. Since max day in feb is 28/29, it move to the next month (March, which is 2)

The setMonth here is not what you expect, and what happens in better libraries.
If you set a date 31.x.yyyy to x+1, probably the next month (x+1) will not have 31 days. So 31.x+1.yyyy will be changed to 1.x+2.yyyy.
In such case, the month will be increased by 2 - the date completely changed.
I had this problem with changing February->March, thanks God that was only a test.

This has to do with the current local date, even if the date you're setting is in the past or future (assuming you are correctly using the month range 0-11). This is because when you initialize Date(), it is using the current date. When you modify the date by using setFullYear(), setMonth() or setDate(), the default "current" values are still present and can shift the date.
If your current day of the month (today) is the 31st of the month and you then set a date in the past using setMonth(), setDate() where the month has less than your current 31 days, then Date() will give you the wrong month, even if you specifically state it. This is because when you setMonth(), the current date value of 31, which doesn't exist in the month you set, pushes it into the next month. Then when you set the date, the month never changes back.
If you set the day of the month before the month - setDate(), setMonth(), this fixes the problem, but has another similar issue / bug. If your current month only has 30 days and the date you're trying to set has 31 days, it will set the date of the month as 1, not 31. This is resolved if you set the month before the day - setMonth(), setDate(), but then you're back to the first problem.
Solutions:
Get the values and then set the day of the month and month at the same time (as reetah suggested) - setMonth(8,1)
Set the year with optional values to initialize setFullYear(1972, 0, 1), then setMonth, setDate.
Set the month, set the day, then verify the month equals what you
set it to and set it again if not - setMonth(), setDate(), setMonth()
function formatDate(date) {
var monthNames = [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
];
var day = date.getDate();
var monthIndex = date.getMonth();
var year = date.getFullYear();
return day + ' ' + monthNames[monthIndex] + ' ' + year;
}
var date = new Date();
if (date.getDate() < 31) {
$("#mydate").text("YOUR LOCAL DATE (on your computer) MUST BE SET TO THE 31st for this bug to show.");
} else {
date.setFullYear(1972);
date.setMonth(8); // (month-1)
date.setDate(24);
var breakdown = "<br>Day: " + date.getDate() + "<br>Month: " + date.getMonth() + "<br>Year: " + date.getFullYear();
$("#mydate").html("Set as September (8)<br><br>" + formatDate(date) + breakdown);
var date = new Date();
date.setFullYear(1972);
date.setMonth(8, 24); // (month-1)
var breakdown = "<br>Day: " + date.getDate() + "<br>Month: " + date.getMonth() + "<br>Year: " + date.getFullYear();
$("#mydate4").html("Set as September (8) but set day before month<br><br>" + formatDate(date) + breakdown);
date.setFullYear(1972);
date.setMonth(9); //October (month-1)
date.setDate(24);
var breakdown = "<br>Day: " + date.getDate() + "<br>Month: " + date.getMonth() + "<br>Year: " + date.getFullYear();
$("#mydate2").html("Set as October (9)<br><br>" + formatDate(date) + breakdown);
var date = new Date();
date.setFullYear(1972);
date.setMonth(7); //Aug (month-1)
date.setDate(24);
var breakdown = "<br>Day: " + date.getDate() + "<br>Month: " + date.getMonth() + "<br>Year: " + date.getFullYear();
$("#mydate3").html("Set as August (7)<br><br>" + formatDate(date) + breakdown);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
September 1972 has only 30 days. If your current local day is 31, the Date will return October 1972 when you specify September before you specify the day of the month.
<br><br><div id="mydate" style="color: red;">
</div>
<br><br>
<div id="mydate4">
</div><br><br>
<div id="mydate2">
</div>
<br><br>
<div id="mydate3">
</div>

Well, from a standpoint of a consumer of setMonth() method I would expect it to behave logically and not overflow to a different calendar month. Setting the actual day in the setMonth() method also is not the best option since in major cases I wouldn't like to get a first day of the changed month.
Yet, having in mind the Javascript logic about dates this behavior takes place in numerous flows: any month with 31 days in case the setMonth() is executed for the 31st day of that month and changed month does not have this day then the actual month as a result will not be the expected one.
Therefore I came up with the following solution that does cover all of the possible cases and results in the most close result to the desired one. I.e. setting a month for 31st day to a month that does not have it will set the month correctly and the day will be the last day of that month. This will work for all occasions (for instance for months with 30 and 29 days and the desired month of February).
Here's my solution in case anyone is interested:
public static addMonths(date: Date, value: number): Date {
let expectedMonth: number = date.getMonth() + value;
if (expectedMonth > 12) {
expectedMonth = expectedMonth % 12;
}
if (expectedMonth < 0) {
expectedMonth += 12;
}
date.setMonth(date.getMonth() + value);
const daysToAdd: number = date.getMonth() > expectedMonth ? -1 : 1;
while (date.getMonth() !== expectedMonth) {
date.setDate(date.getDate() + daysToAdd);
}
return date;
}

I just resolved this way:
Example
var d = new Date('2013/01/31');
m = d.getMonth();
month = m*100/100 + 1;
Var month contains the correct value.

Javascript Date: next month

I've been using Javascript's Date for a project, but noticed today that my code that previously worked is no longer working correctly. Instead of producing Feb as expected, the code below produces March.
My code looks something like this:
current = new Date();
current.setMonth(current.getMonth()+1); //If today is Jan, expect it to be Feb now
This code worked everyday up until today. Is this a Javascript bug or am I going about this the wrong way?

You'll probably find you're setting the date to Feb 31, 2009 (if today is Jan 31) and Javascript automagically rolls that into the early part of March.
Check the day of the month, I'd expect it to be 1, 2 or 3. If it's not the same as before you added a month, roll back by one day until the month changes again.
That way, the day "last day of Jan" becomes "last day of Feb".
EDIT:
Ronald, based on your comments to other answers, you might want to steer clear of edge-case behavior such as "what happens when I try to make Feb 30" or "what happens when I try to make 2009/13/07 (yyyy/mm/dd)" (that last one might still be a problem even for my solution, so you should test it).
Instead, I would explicitly code for the possibilities. Since you don't care about the day of the month (you just want the year and month to be correct for next month), something like this should suffice:
var now = new Date();
if (now.getMonth() == 11) {
var current = new Date(now.getFullYear() + 1, 0, 1);
} else {
var current = new Date(now.getFullYear(), now.getMonth() + 1, 1);
}
That gives you Jan 1 the following year for any day in December and the first day of the following month for any other day. More code, I know, but I've long since grown tired of coding tricks for efficiency, preferring readability unless there's a clear requirement to do otherwise.

Instead, try:
var now = new Date();
current = new Date(now.getFullYear(), now.getMonth()+1, 1);

I was looking for a simple one-line solution to get the next month via math so I wouldn't have to look up the javascript date functions (mental laziness on my part). Quite strangely, I didn't find one here.
I overcame my brief bout of laziness, wrote one, and decided to share!
Solution:
(new Date().getMonth()+1)%12 + 1
Just to be clear why this works, let me break down the magic!
It gets the current month (which is in 0..11 format), increments by 1 for the next month, and wraps it to a boundary of 12 via modulus (11%12==11; 12%12==0). This returns the next month in the same 0..11 format, so converting to a format Date() will recognize (1..12) is easy: simply add 1 again.
Proof of concept:
> for(var m=0;m<=11;m++) { console.info( "next month for %i: %i", m+1, (m+1)%12 + 1 ) }
next month for 1: 2
next month for 2: 3
next month for 3: 4
next month for 4: 5
next month for 5: 6
next month for 6: 7
next month for 7: 8
next month for 8: 9
next month for 9: 10
next month for 10: 11
next month for 11: 12
next month for 12: 1
So there you have it.

You can use the date.js library:
http://code.google.com/p/datejs/
And just do this
Date.today().next().month();
You will have the exact value for today + 1 month (including days)

If you use moment.js, they have an add function.
Here's the link -
https://momentjs.com/docs/#/manipulating/add/
moment().add(7, 'months');
I also wrote a recursive function based on paxdiablo's answer to add a variable number of months. By default this function would add a month to the current date.
function addMonths(after = 1, now = new Date()) {
var current;
if (now.getMonth() == 11) {
current = new Date(now.getFullYear() + 1, 0, 1);
} else {
current = new Date(now.getFullYear(), now.getMonth() + 1, 1);
}
return (after == 1) ? current : addMonths(after - 1, new Date(now.getFullYear(), now.getMonth() + 1, 1))
}
Example
console.log('Add 3 months to November', addMonths(3, new Date(2017, 10, 27)))
Output -
Add 3 months to November Thu Feb 01 2018 00:00:00 GMT-0800 (Pacific Standard Time)

If you are able to get your hands on date-fns library v2+, you can import the function addMonths, and use that to get the next month
<script type="module">
import { addMonths } from 'https://cdn.jsdelivr.net/npm/date-fns/+esm';
const nextMonth = addMonths(new Date(), 1);
console.log(`Next month is ${nextMonth}`);
</script>

ah, the beauty of ternaries:
const now = new Date();
const expiry = now.getMonth() == 11 ? new Date(now.getFullYear()+1, 0 , 1) : new Date(now.getFullYear(), now.getMonth() + 1, 1);
just a simpler version of the solution provided by #paxdiablo and #Tom

try this:
var a = screen.Data.getFullYear();
var m = screen.Data.getMonth();
var d = screen.Data.getDate();
m = m + 1;
screen.Data = new Date(a, m, d);
if (screen.Data.getDate() != d)
screen.Data = new Date(a, m + 1, 0);

You may probably do this way
var currentMonth = new Date().getMonth();
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
for(var i = currentMonth-1 ; i<= 4; i++){
console.log(monthNames[i])// make it as an array of objects here
}

here is how i do it:
getMonthName(offset=0, format="long"){
/*
i.e.
offset: 0 - this month
offset: -1 - previous month
offset: 1 - next month
format: short - Oct
format: long - October
*/
const now = new Date();
const month = new Date(now.getFullYear(), now.getMonth() + offset, 1)
return month.toLocaleString('default', { month: format })
}