Hello Guys i want to show the week ending date in javascript or through some jquery calendar plugin with below functionality
It looks something like this:
Week Ending: < show weekending date in dd/MMM/YYYY format >
and then if we click on these left and right arrows it should show next weekend in same format.
kindly please suggest me if there is a plugin with similar functionality or if we can achieve this with simple javascript
Use this to get the first and last day of week.
var curr = new Date; // get current date
var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
var last = first + 6; // last day is the first day + 6
var firstday = new Date(curr.setDate(first)).toUTCString();
var lastday = new Date(curr.setDate(last)).toUTCString();
console.log("Week Start : "+firstday);
console.log("Weekend : "+lastday);
var date = new Date(lastday);
var formattedDate = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
console.log(formattedDate);
You can change lastday format manually using getDay(), getMonth() and getFullYear()
Try This .
var current = new Date(); // get current date
var weekstart = current.getDate() - current.getDay() +1;
var weekend = weekstart + 6; // end day is the first day + 6
var monday = new Date(current.setDate(weekstart));
var sunday = new Date(current.setDate(weekend));
<html>
<head>
<script>
function myFunction(data) {
if(data == "down")
change = change - 7;
else if(data == "up")
change = change + 7;
var someDate = new Date();
var day = someDate.getDay();
var numberOfDaysToAdd = 0;
if(day == 1) { numberOfDaysToAdd = 5; }
else if(day == 2) { numberOfDaysToAdd = 4; }
else if(day == 3) { numberOfDaysToAdd = 3; }
else if(day == 4) { numberOfDaysToAdd = 2; }
else if(day == 5) { numberOfDaysToAdd = 1; }
someDate.setDate(someDate.getDate() + numberOfDaysToAdd + change);
var dd1 = someDate.getDate();
var mm1 = someDate.getMonth() + 1;
var yy1 = someDate.getFullYear();
someDate.setDate(someDate.getDate() + 1);
var dd2 = someDate.getDate();
var mm2 = someDate.getMonth() + 1;
var yy2 = someDate.getFullYear();
var someFormattedDate = dd1 + '/'+ mm1 + '/'+ yy1 + '\n' + '&' +
dd2 + '/'+ mm2 + '/'+ yy2;
document.getElementById("showWeekends").innerHTML = someFormattedDate;
}
</script>
</head>
<body>
<button onclick="myFunction('down')"><</button>
<span id="showWeekends"></span>
<button onclick="myFunction('up')">></button>
</body>
<script>
var change = 0;
myFunction("none");
</script>
</html>
Related
In google apps script I use often in summertimeperiod GMT+2 or in wintertime GMT+1 for the correct date.
To avoid to change this twice a year manually i developped following function:
function StartSummerWintertime() {
var i;
var today;
var year;
var SST;
var SWT;
var day;
var GMT_time;
today = new Date();
Logger.log("today = " + today)
year = today.getFullYear();
//Summertime starts last Sunday in March.
for (i = 31; i > 24; i--) {
SST = new Date("March " + i + "," + year);
day = SST.getDay();
if (day == 0) {
break;
}
}
Logger.log("Start date Summertime "+year+" = " + SST)
//Wintertime starts last Sunday in October.
for (i = 31; i > 24; i--) {
SWT = new Date("Oct " + i + "," + year);
day = SWT.getDay();
if (day == 0) {
break;
}
}
Logger.log("Start date Wintertime "+year+" = " + SWT)
//The switch takes place at 2:00 AM, so I have added 2 hours (= 2 * 60 * 60 * 1000 ms)
if (today.getTime() < (SST.getTime() + 2*60*60*1000) || today.getTime() > SWT.getTime() + (2*60*60*1000)) {
GMT_time = "GMT+1";
}
else {
GMT_time = "GMT+2";
}
Logger.log("GMT_time = " + GMT_time)
var date1 = Utilities.formatDate(new Date("July 6, 2021"), "GMT+2", "d-M-yyyy");
var date2 = Utilities.formatDate(new Date("July 6, 2021"), "GMT+1", "d-M-yyyy");
Logger.log("date1 = " + date1)
Logger.log("date2 = " + date2)
var date3 = Utilities.formatDate(new Date("July 6, 2021"), GMT_time, "d-M-yyyy");
var date4 = Utilities.formatDate(new Date("July 6, 2021"), GMT_time, "d-M-yyyy");
Logger.log("date3 = " + date3)
Logger.log("date4 = " + date4)
}
Date 1 and date 2 give different dates, date 3 and date 4 give correct (same) dates. The problem is solved however there should be a smarter (shorter) way to do so.
Please advise.
I have a formatted date as a string '021519' using javascript which return NAN on display in html.
Note I have a xslt using the javascript.
var newDate = '';
var formatedDate = new Date(date);
var year = formatedDate.getFullYear().toString();
var month = (1 + formatedDate.getMonth()).toString();
if(parseInt(month) < 10)
{
month = "0" + month;
}
var day = formatedDate.getDate().toString();
if(dateFormat == '1')
{
newDate = month + day + year.substr(2,4);
}
else
{
newDate = month + day + year;
}
var newLeftStart3 = parseInt(startPosition) - 1;
var newLeftEnd3 = newLeftStart + newDate.length;
var newRightStart3 = parseInt(endPosition) - newDate.length;
var newRightEnd3 = newRightStart + newDate.length;
if(alignment == '1')
{
addendaSpace = addendaSpace.substr(0, newLeftStart3) + newDate + addendaSpace.substr(newLeftEnd3);
}
if(alignment == '2')
{
addendaSpace = addendaSpace.substr(0, newRightStart3) + newDate + addendaSpace.substr(newRightEnd3);
}
newDate is displaying as NaN i hope this code helps.
I usually format dates in javascript this way:
var d = new Date();
var date = d.getDate();
var month = d.getMonth() + 1; //Months are zero based
var year = d.getFullYear();
console.log(date + "-" + month + "-" + year);
Date formatting issues after July.the date shown is a weekly format. any help will be highly appreciated.the date is working fine just that not working as expected
$(document).ready(function () {
var curr = new Date; // get current date
var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
var last = first + 6; // last day is the first day + 6
var startDate = new Date(curr.setDate(first));
startDate = ((startDate.getMonth() + 1) < 10 ? '0'
: '')
+ (startDate.getMonth() + 1)
+ "/"
+ ((startDate.getDate() < 10 ? '0' : '') + startDate
.getDate())
+ "/"
just change this code
var endDate = new Date(startDate);
endDate.setDate(startDate.getDate() + 6);
You can check below working code.
$(document).ready(function () {
//var curr = new Date('2020-02-29'); // for leap
var curr = new Date();// get current date
var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
var startDate = new Date(curr.setDate(first));
var endDate = new Date(startDate);
endDate.setDate(startDate.getDate() + 6);
startDate = ((startDate.getMonth() + 1) < 10 ? '0'
: '')
+ (startDate.getMonth() + 1)
+ "/"
+ ((startDate.getDate() < 10 ? '0' : '') + startDate
.getDate())
+ "/"
+ startDate.getFullYear();
endDate = ((endDate.getMonth() + 2) < 10 ? '0' : '')
//this might have some flaws if i make it to 2 it works but this is short term fix and will break again
+ (endDate.getMonth() + 1)
+ "/"
+ ((endDate.getDate() < 10 ? '0' : '') + endDate
.getDate())
+ "/"
+ endDate.getFullYear();
document.getElementById("ok").innerHTML = startDate;
document.getElementById("napa").innerHTML = endDate;
$(".next")
.click(
function () {
document.getElementById("tabletbody").innerHTML = "";
var startdt = new Date($('#ok')
.text());
startdt.setDate(startdt
.getDate() + 7);
document.getElementById("ok").innerHTML = (getDateFormat(startdt));
var enddt = new Date($('#napa')
.text());
enddt
.setDate(enddt
.getDate() + 7);
document.getElementById("napa").innerHTML = (getDateFormat(enddt));
updateCompass();
return false;
});
function getDateFormat(d) {
var month = ((d.getMonth() + 1) < 10 ? '0' : '')
+ (d.getMonth() + 1);
var dd = (d.getDate() < 10 ? '0' : '')
+ d.getDate();
return month + "/" + dd + "/" + d.getFullYear();
}
$(".previous").click(function () {
document.getElementById("tabletbody").innerHTML = "";
var startdt = new Date($('#ok').text());
startdt.setDate(startdt.getDate() - 7);
$('#ok').text(getDateFormat(startdt));
var enddt = new Date($('#napa').text());
enddt.setDate(enddt.getDate() - 7);
$('#napa').text(getDateFormat(enddt));
updateCompass();
return false;
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="ok"></div>
<div id="napa"></div>
I would like to change the date format in my code like that - > 19.7.2016
Could anyone help me, please?
function calcWorkingDays(fromDate, days) {
var count = 0;
var m = new Date();
while (count < days) {
fromDate.setDate(fromDate.getDate() + 1);
if (fromDate.getDay() != 0 && fromDate.getDay() != 6) // Skip weekends
count++;
}
return fromDate;
}
alert(calcWorkingDays(new Date(), 4));
You need to format the dateobject to your likeness:
Extract the Day, Month and Year from your DateObject:
var month = fromDate.getUTCMonth() + 1; //months from 1-12
//January=0, February=1, etc
var day = fromDate.getUTCDate();
var year = fromDate.getUTCFullYear();
newdate = day + "." + month + "." + year;
Complete Example:
function calcWorkingDays(fromDate, days) {
var count = 0;
var m = new Date();
while (count < days) {
fromDate.setDate(fromDate.getDate() + 1);
if (fromDate.getDay() != 0 && fromDate.getDay() != 6) // Skip weekends
count++;
}
var month = fromDate.getUTCMonth() + 1;
var day = fromDate.getUTCDate();
var year = fromDate.getUTCFullYear();
newdate = day + "." + month + "." + year;
return newdate;
}
alert(calcWorkingDays(new Date(), 4));
Other possible examples are:
new Date().toISOString()
"2016-02-18T23:59:48.039Z"
new Date().toISOString().split('T')[0];
"2016-02-18"
new Date().toISOString().replace('-', '/').split('T')[0].replace('-', '/');
"2016/02/18"
new Date().toLocaleString().split(',')[0]
"2/18/2016"
source
You should convert date to string:
function calcWorkingDays(fromDate, days) {
var count = 0;
var m = new Date();
while (count < days) {
fromDate.setDate(fromDate.getDate() + 1);
if (fromDate.getDay() != 0 && fromDate.getDay() != 6) // Skip weekends
count++;
}
return fromDate.getDate() + "." + (fromDate.getMonth()+1) + "." + fromDate.getFullYear();
}
alert(calcWorkingDays(new Date(), 4));
I need to calculate if a date in the table is within 5 days and update the class of the parent row. I was able to do this (in FF and Chrome) but for some reason, it isn't working in IE8.
An item in the table would have a date like "08/28/13" and the TD would have the class "time".
$('td:contains("Scheduled")').parents('tr').addClass('scheduled');
$("td.time").each(function (index) {
var date = $(this).text();
//sep date
var year = date.substring(6, 10);
var month = date.substring(0, 2);
var day = date.substring(3, 5);
alert(month + ' ' + day + ', ' + year);
//today
var d = new Date();
var today = d.getDate();
var m = new Array();
m[0] = "01";
m[1] = "02";
m[2] = "03";
m[3] = "04";
m[4] = "05";
m[5] = "06";
m[6] = "07";
m[7] = "08";
m[8] = "09";
m[9] = "10";
m[10] = "11";
m[11] = "12";
var b = d.getMonth();
var n = parseInt(m[d.getMonth()]);
var monthStart = new Date(year, b, 1);
var monthEnd = new Date(year, b + 1, 1);
var monthLength = (monthEnd - monthStart) / (1000 * 60 * 60 * 24);
var nextMonth = n + 1;
var dayDiff = 5 - (monthLength - today);
if ((monthLength - 5) < today && nextMonth == month && day < dayDiff) {
if (!$(this).parents('tr').hasClass('scheduled')) {
$(this).parents('tr').addClass('urgent');
};
};
if (n == month && today < day && day <= (today + 5)) {
if (!$(this).parents('tr').hasClass('scheduled')) {
$(this).parents('tr').addClass('urgent');
};
};
});
I tried the solution in the question that #abc123 commented and got the numerical timestamp- based difference between 5 days. I also updated the way I got today's date. Less code.
$('td:contains("Scheduled")').parents('tr').addClass('scheduled');
$("td.time").each(function (index) {
var date = $(this).text();
var oppTime = date.substring(0, 10);
var d = new Date();
var today = d.toJSON();
var t = today.substring(0, 4) + "/" + today.substring(5, 7) + "/" + today.substring(8, 10);
var timeStamp_oppDate = new Date(oppTime).getTime();
var timeStamp_thisDay = new Date(t).getTime();
var timeDiff = timeStamp_oppDate - timeStamp_thisDay;
if (432000000 >= timeDiff) {
if (!$(this).parents('tr').hasClass('scheduled')) {
$(this).parents('tr').addClass('urgent');
};
};
});