Develop Reference

Javascript show next possible delivery date

I have a website, where the client can see the delivery date.
Here is the code
function getProductRecordHTML(Product, index, quantity, ProductType, blok)
{
var manufacturer = "", article_show = "", name = "";
var time_to_exe = Product.time_to_exe;
var displayDate;
if(time_to_exe == 6)
{
const date = new Date();
date.setDate(date.getDate() + parseInt(time_to_exe));
displayDate = date.toLocaleDateString();
}
if (displayDate) {
time_to_exe = displayDate;
} else {
time_to_exe = time_to_exe + "d";
}
For now, time_to_exe gives the delivery time in days
This code calculates the next delivery date just by adding these 6 days to the current date.
My main goal is to get the period from Monday to Wednesday at 12 pm, if it's true then time_to_exe shows the date of next Monday (for example 23/08/2021), but if it's false (for example it's period from Wednesday after 12 pm till Sunday 11:59 pm) then time_to_exe show Monday date 1-week after (for example 30/08/2021).
I hope explained clearly.
Already many thanks to the user #Christopher for helping before.

One way to work with dates much easier is to use a library like moment.js (which I have been using for years), or maybe even better a newer library like Luxon, since moment.js is going into maintenance mode.
Let's see how you would achieve your date calculation using moment.js:
var orderDateTime = moment('08/18/2021 8:15 am');
// Get Sunday (first day) of this week and add 3 days (to get to Wednesday) and set the time to 11:59am
var cutOffDate = moment().startOf('week').add(3,'days').set({'hour': 11, 'minute': 59, 'second': 59});
// Initialize delivery date from order date
var deliveryDate = orderDateTime.clone();
if (orderDateTime.isSameOrBefore(cutOffDate)) {
deliveryDate = deliveryDate.add(1,'week').startOf('week').add(1,'day'); // Monday next week
} else {
deliveryDate = deliveryDate.add(2,'week').startOf('week').add(1,'day'); // Monday the week after next
}
alert("Delivery Date is "+deliveryDate.format("MM/DD/YYYY"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
That's all you need for your calculation.
You can also find a fiddle of the code above at https://jsfiddle.net/yLpf3vxj/

The Javascript Date object includes a getDay() method that returns a numerical value for the day of the week. From this it's possible to work out the previous Monday's date, and then add 7 or 14 depending on the original date.
This function takes a JavaScript Date object and returns the relevant Monday as another Date.
Note that setDate() will update month and year as appropriate if the date being set is outside the current month.
function getMonday(orderDate) {
orderDate = orderDate || new Date();
if (!(orderDate instanceof Date)) {
throw "Invalid date";
}
// Get the date last Monday
let lastMonday = new Date(orderDate);
lastMonday.setDate(lastMonday.getDate()-lastMonday.getDay()+1);
// If order date is before Wednesday noon, deliver next Monday. Add 7 to last Monday date
if (orderDate.getDay()<3 || ((orderDate.getDay() === 3) && orderDate.getHours()<12)) {
lastMonday.setDate(lastMonday.getDate()+7);
} else {
// Otherwise. add 14 to last Monday date.
lastMonday.setDate(lastMonday.getDate()+14);
}
return lastMonday;
}
input:
let testDates = [
new Date(),
new Date(2021,7,18,11),
new Date(2021,7,18,13),
new Date(2021,9,1,11),
'bad date'
];
Output:
Wed Aug 18 2021 10:14:41 GMT+1200 (New Zealand Standard Time), Mon Aug 23 2021 10:14:41 GMT+1200 (New Zealand Standard Time)
Wed Aug 18 2021 11:00:00 GMT+1200 (New Zealand Standard Time), Mon Aug 23 2021 11:00:00 GMT+1200 (New Zealand Standard Time)
Wed Aug 18 2021 13:00:00 GMT+1200 (New Zealand Standard Time), Mon Aug 30 2021 13:00:00 GMT+1200 (New Zealand Standard Time)
Fri Oct 01 2021 11:00:00 GMT+1300 (New Zealand Daylight Time), Mon Oct 11 2021 11:00:00 GMT+1300 (New Zealand Daylight Time)
Invalid Date
Demo:https://jsfiddle.net/dzsf34ga/

moment.js, list days based on locale dow

I have a script that is setting the day to start the week in the locale, however when I list out the days they arent in order that I expect:
moment.updateLocale(this.language, {
week: {
dow: 4,
},
});
const weekDays = moment.weekdaysMin();
In this scenario I would expect to get the list:
Thu Fri Sat Sun Mon Tue Wed
But I always get:
Sun Mon Tue Wed Thu Fri Sat
I would really appreciate some assistance as I can't figure out what is wrong here.

You can pass boolean argument to weekdaysMin to get weekdays sorted by locale.
See Listing the months and weekdays of the current Moment.js locale section of the docs:
Similarly, moment.monthsShort returns abbreviated month names, and moment.weekdays, moment.weekdaysShort, moment.weekdaysMin return lists of weekdays.
...
As of 2.13.0 you can pass a bool as the first parameter of the weekday functions. If true, the weekdays will be returned in locale specific order.
Here a live sample:
moment.updateLocale('en', {
week: {
dow: 4,
},
});
const weekDays = moment.weekdaysMin();
console.log(weekDays);
const weekDaysSort = moment.weekdaysMin(true);
console.log(weekDaysSort);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>

Unable to get the first day of the Month in Angular 2/4

I'm calculating the dates for my application like date,week,month.
First I am defining day,week,month,custom like:
this.reportTypes = [{TypeId: 1, Type: 'Day'}, {TypeId: 6, Type: 'Week'}, {TypeId: 30, Type: 'Month'}, {
TypeId: 10,
Type: 'Custom'
}]
Next I'm defining dates like:
var currdate = new Date();
if(reportType==1){
// this.reportDataFromDate=currdate;
// this.reportDataToDate=currdate;
//This is for setting the current date
this.reportDataFromDate= currdate;
this.reportDataToDate= currdate;
}
else if(reportType==30){
var First = new Date(currdate.getFullYear(),currdate.getMonth(),1);
this.reportDataFromDate=First;
this.reportDataToDate=currdate;
}
else if(reportType!=10){
var last = new Date(currdate.getTime() - (reportType * 24 * 60 * 60 * 1000));
this.reportDataFromDate=last;
this.reportDataToDate=currdate;
}
}
The problem is after selecting reportType == 30 then it has to get the first day of the month.
It is showing the date as 1-Dec-2017 but it is getting the data of till 30th November 2017?
This is screenshot of the SQL server. I'm sending the date as 1st Dec 2017 but it is getting 30-11-2017.

When the Date() constructor is invoked with integers, the result is a date object with that date assumed your systems (read browser/os) timezone.
Example:
let d = new Date(2017);
// returns Thu Jan 01 1970 01:00:02 GMT+0100 (W. Europe Standard Time)
// and with d.toUTCString(): Fri, 30 Dec 2016 23:00:00 GMT
Which may end up in an entire different year when sending to the server
Using the string constructor and specifying timezone will help you overcome this.
Example:
let d = new Date('2017z');
// returns Sun Jan 01 2017 01:00:00 GMT+0100 (W. Europe Standard Time)
// and with d.toUTCString(): Sun, 01 Jan 2017 00:00:00 GMT
The latter which is what you should pass to a server, and normally do calculations on.
However, note that calculations with dates are a complicated matter best left to a library like moment.js. To get a feel of what you are dealing with have a look at this great talk from the WebRebel conference.
So to actually give an answer to your title, try this example which creates the date in a simple string using UTC:
let d = new Date(currdate.getUTCFullYear() + ' ' +(currdate.getUTCMonth() + 1) + ' 1z');
d.getUTCDay(); // returns the day as an integer where Monday is 0.
Note that we add 1 month due to getUTCMonth() returns January as 0.

Why the difference?
The new Date(x,y,z) constructor treats the parameters as local date values.
See MDB Web Docs - Date
Note: Where Date is called as a constructor with more than one argument, the specifed arguments represent local time. If UTC is desired, use new Date(Date.UTC(...)) with the same arguments.
But, under the hood the date is stored as UTC (milliseconds since 1 Jan 1970).
const date = new Date(2017, 11, 29);
console.log('valueOf()', date.valueOf()) // 1514458800000
and the UTC date is different to your local date (see trailing 'Z' indicates UTC)
const date = new Date(2017, 11, 29);
console.log('date', date) // "2017-12-28T11:00:00.000Z" (trailing 'Z' means UTC)
// The difference in minutes between browser local and UTC
console.log('getTimezoneOffset()', date.getTimezoneOffset() )
and when you send it to the server, JSON sends it as UTC
const date = new Date(2017, 11, 29);
console.log('JSON', date.toJSON())
// JSON will yield string version of UTC === 2017-12-28T11:00:00.000Z
How to fix it
Well, you might decide that you actually want the date/time in local, and conclude it's not broken.
But if you want to send UTC to the server, wrap the parameters in Date.UTC()
const date = new Date(Date.UTC( 2017, 11, 29 ))
console.log('date.toJSON()', date.toJSON() ) // 2017-12-29T00:00:00.000Z
What about month parameter === 11?
From the MDB page referenced above,
Note: The argument month is 0-based. This means that January = 0 and December = 11.

If you are using .Net Web API as backend, you can config the timezone in Web API WebApiconfig.cs like below. It will serialize the time in UTC.
public static void Register(HttpConfiguration config)
{
config.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Utc;
}
Or use
config.Formatters.JsonFormatter.SerializerSettings.DateTimeZ‌​oneHandling = Newtonsoft.Json.DateTimeZoneHandling.RoundtripKind; //Time zone information should be preserved when converting.

getMonth getUTCMonth difference result

I found and inconsistent result when using the JavaScript date.getMonth() and date.getUTCMonth(), but only with some dates. The following example demonstrates the problem:
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<p id="demo">Click the button to display the month</p>
<script type="text/javascript">
function myFunction()
{
var d = new Date(2012, 8, 1);
var x = document.getElementById("demo");
x.innerHTML=d;
x.innerHTML+='<br/>result: ' + d.getMonth();
x.innerHTML+='<br/>result UTC: ' + d.getUTCMonth();
}
</script>
</body>
</html>
The output of this example is:
Sat Sep 01 2012 00:00:00 GMT+0100 (Hora de Verão de GMT)
result: 8
result UTC: 7
If i change the date to (2012, 2, 1) the output is:
Thu Mar 01 2012 00:00:00 GMT+0000 (Hora padrão de GMT)
result: 2
result UTC: 2
In the first example, getMonth returns 7 and getUTCMonth returns 8. In the second example, both returns the same value 2.
Does anyone already experiences this situation? I am from Portugal and i think that it has something to be with my GMT but i don't understand why this is happening, because the examples are running in same circumstances.
Thanks in advances

You will see that, depending on YOUR TIMEZONE, the console logs may be different. I chose the first of the month '01' because it will be given a midnight default time '00:00:00', which will result in some timezones yielding February instead of March (you can get the full scoop here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) :
let date1 = '2019-03-01'; // defaults to UTC
let date2 = '2019-03-01T14:48:00'; // LOCAL date/time
let dt1 = new Date(date1);
let dt2 = new Date(date2)
let month1 = dt1.getMonth();
let month2 = dt2.getMonth();
console.log("mon1: " + month1);
console.log("mon2: " + month2);

You will find that it is caused by DST difference.

Universal Time Zone date methods are used for working with UTC dates
Date returns month between 0 to 11
new Date(1976, 01 , 18) -
Wed Feb 18 1976 00:00:00 GMT+0530 (India Standard Time)
*getUTCDate return same as getDate() but returns Date based on World Time Zone, same with month and year
new Date(1976, 01 , 18).getUTCDate() -
17
new Date(1976, 01 , 18).getDate() -
18
new Date(1976, 02 , 18).getUTCMonth() -
2
new Date(1976, 01 , 18).getMonth() -
1
new Date(1976, 01 , 18).getYear() -
76
new Date(1976, 01 , 18).getUTCFullYear() -
1976
new Date(1976, 01 , 18).getFullYear() -
1976

A Date in js is just a timestamp, meaning there is no timezone information in any Date instance. A date is an absolute timed event (in opposition to a wall clock time which is relative to your timezone).
So… when you print the date to the console, because there is no timezone information in the date object, it will use your browser's timezone to format the date.
This is embarrassing because if you provide the same date to 2 clients, one in US and the other one in EU and ask them the date's month, because both are using their own timezone, you might end up with different answers.
To prevent this, getUTCMonth(); will use a default timezone of UTC (+0) instead of the client's browser so that the answer will be consistent whatever the client's timezone.

Problem in adding days / month / year to a given date using javascript?

I trying to add days / months / year to a given date and map it to an input field
var d = new Date();
d.setDate(15);
d.setMonth(06);
d.setYear(2011);
document.getElementById("test").innerHTML=d;
d.setDate(d.getDate()+20);
document.getElementById("test").innerHTML+=""+d.getDate()+"/"+d.getMonth()+"/"+d.getYear("YY");
this actually prints out
Fri Jul 15 2011 12:45:48 GMT+0530 (India Standard Time)
4/7/111
actually this is wrong.. it should print out 5/7/2011.. i think by default the system takes as "30" days for a month and adds the +20 days.. but actually Jun has 30 days so that result should be 5/7/2011..
any suggestion about what goes wrong in here.. any alternative for this?

At the first, you have better to use getFullYear to get year as 2011. You did get number from getDate() and add 20. This break Date. You should get long value from getTime(), and add milli-seconds.
<div id="test"></div>
<script>
var d = new Date();
d.setDate(15);
d.setMonth(06);
d.setFullYear(2011);
document.getElementById("test").innerHTML+=" "+d.getDate()+"/"+d.getMonth()+"/"+d.getFullYear();
d.setTime(d.getTime()+1000*60*60*24*20);
document.getElementById("test").innerHTML+=" "+d.getDate()+"/"+d.getMonth()+"/"+d.getFullYear();
</script>

> var d = new Date();
> d.setDate(15);
> d.setMonth(06);
> d.setYear(2011);
is equivalent to:
var d = new Date(2011,6,15); // 15 Jul 2011
Months are zero based (January = 0, December = 11).
Date.prototype.getYear is specified in ECMA-262 ed5 as Return YearFromTime(LocalTime(t)) − 1900. so:
alert(d.getYear()); // 111
whereas:
alert(d.getFullYear()); // 2011

i think by default the system takes as "30" days for a month and adds the +20 days.. but actually May has 31 days so that result should be 5/7/2011.
You are interpreting it a wrong way, Month in a date starts with 0 - Jan..
So as per the date entered by you it comes Jul 15 2011 on the month number 6.
When you add 20 to date it will be Aug 04 2011 and you are directly getting month number which is 7 - i.e. Aug which misleads your calculation. And for the year, yes it is you should getFullYear
Read this to get your basics correct..