I've been trying to get this script to show a paragraph during certain hours of the day. Now I'm trying to add certain days, such as the weekend. I was unable to figure it out.
This is one of the dozen things I tried:
var day = new Date();
var week = day.getHours();
var weekend = day.getDay() == 0 || day.getDay() == 6;
if (week < 4 || week > 12) || (weekend === true) { document.write('<p class="alert alert-danger department-hours-warning"><i class="fa fa-clock-o fa-3x pull-left"></i>NOTICE: This is not a 24 hour department and we are currently closed, please anticipate a delay in response. Our department hours are from 09:00-17:00 EST Monday through Friday. We are closed on USA holidays and other days that may be listed on our calendar.</p>'); }
The goal here is too show the paragraph if it's not between 4am to 12am on weekdays.
EDIT: updated script, but it is not working.
As mentioned in your previous question (which you've since deleted). JS dates are notoriously tricky. For example in your code new Date() is created relative to the users local timezone, not that of your business. This means it may well be a weekday for you while it is a weekend for me.
My recommendation would be to use a library like MomentJS to assist with your querying. It would look something like:
(function(){
function initialize(){
moment.tz.setDefault('America/New_York'); // replace this with your actual timezone
var NOW = moment();
var alertZone = document.getElementById('alertZone');
// is weekend or out of office hours
if(NOW.isoWeekday() > 5 || NOW.hour() < 9 || NOW.hour() > 17){
alertZone.innerHTML = '<p class="alert alert-danger department-hours-warning clearfix"><i class="fa fa-clock-o fa-3x pull-left"></i>NOTICE: This is not a 24 hour department and we are currently closed, please anticipate a delay in response. Our department hours are from 09:00-17:00 EST Monday through Friday. We are closed on USA holidays and other days that may be listed on our calendar.</p>';
}else{
alertZone.innerHTML = '<p class="alert alert-success department-hours-success clearfix"><i class="fa fa-clock-o fa-3x pull-left"></i>Welcome y\'all we\'re open!</p>';
}
}
window.onload = initialize;
})()
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.11/moment-timezone.min.js"></script>
<div id="alertZone"></div>
Explanation
Moment timezone let's us set your local timezone using .setDefault()(all moments created after this will be relative to YOUR timezone rather than that of the user).
We then check using .isoWeekday()(which is a non-locale specific check for day of the week [1-5 = Monday-Friday]), and .hour()(returns a number between 0-23) if we are outside of office hours.
Related
What I would like to do is to create a script or with a function that will add automatically the day, the month and the year per row for 4 years for example in order to make a calendar of shooting, pre production and post prod per film. It would be so long to do it manually and add each day per month for 4 or more years. If it's done by a script it would be done instantly and would be possible to update later to add more years.
Example of what I'm looking for
If it's too complicated per day, I can add per week. Like week 1 January 21, just like in the picture. But I really prefer if that's possible to add a row per day to be the most accurate as possible.
Days for the rest of the year in a column
function daysforrestofyear() {
let days = [];
let dt = new Date();
const ldtv = new Date(dt.getFullYear() + 1,0,1).valueOf();
do {
days.push([Utilities.formatDate(dt,Session.getScriptTimeZone(),"dd/MMM/yyyy")]);
dt.setDate(dt.getDate() + 1);
}while(dt.valueOf() < ldtv)
const ss = SpreadsheetApp.getActive();
const sh = ss.getSheetByName("Sheet0");
sh.clearContents();
sh.getRange(1,1,days.length,1).setValues(days);
}
Jun/04/2022
Jun/05/2022
Jun/06/2022
Jun/07/2022
Jun/08/2022
Jun/9/2022
Jun/10/2022
Jun/11/2022
Jun/12/2022
Jun/13/2022
Jun/14/2022
Jun/15/2022
Jun/16/2022
Jun/17/2022
Jun/18/2022
Jun/19/2022
Jun/20/2022
Jun/21/2022
Jun/22/2022
Jun/23/2022
Jun/24/2022
Jun/25/2022
Jun/26/2022
Jun/27/2022
Jun/28/2022
Jun/29/2022
Jun/30/2022
Jul/01/2022
Jul/02/2022
Jul/03/2022
Jul/04/2022
Jul/05/2022
Jul/06/2022
Jul/07/2022
Jul/08/2022
Jul/9/2022
Jul/10/2022
Jul/11/2022
Jul/12/2022
Jul/13/2022
Jul/14/2022
Jul/15/2022
Jul/16/2022
Jul/17/2022
Jul/18/2022
Jul/19/2022
Jul/20/2022
Jul/21/2022
Jul/22/2022
Jul/23/2022
Jul/24/2022
Jul/25/2022
Jul/26/2022
Jul/27/2022
Jul/28/2022
Jul/29/2022
Jul/30/2022
Jul/31/2022
Aug/01/2022
Aug/02/2022
Aug/03/2022
Aug/04/2022
Aug/05/2022
Aug/06/2022
Aug/07/2022
Aug/08/2022
Aug/9/2022
Aug/10/2022
Aug/11/2022
Aug/12/2022
Aug/13/2022
Aug/14/2022
Aug/15/2022
Aug/16/2022
Aug/17/2022
Aug/18/2022
Aug/19/2022
Aug/20/2022
Aug/21/2022
Aug/22/2022
Aug/23/2022
Aug/24/2022
Aug/25/2022
Aug/26/2022
Aug/27/2022
Aug/28/2022
Aug/29/2022
Aug/30/2022
Aug/31/2022
Sep/01/2022
Sep/02/2022
Sep/03/2022
Sep/04/2022
Sep/05/2022
Sep/06/2022
Sep/07/2022
Sep/08/2022
Sep/9/2022
Sep/10/2022
Sep/11/2022
Sep/12/2022
Sep/13/2022
Sep/14/2022
Sep/15/2022
Sep/16/2022
Sep/17/2022
Sep/18/2022
Sep/19/2022
Sep/20/2022
Sep/21/2022
Sep/22/2022
Sep/23/2022
Sep/24/2022
Sep/25/2022
Sep/26/2022
Sep/27/2022
Sep/28/2022
Sep/29/2022
Sep/30/2022
Oct/01/2022
Oct/02/2022
Oct/03/2022
Oct/04/2022
Oct/05/2022
Oct/06/2022
Oct/07/2022
Oct/08/2022
Oct/9/2022
Oct/10/2022
Oct/11/2022
Oct/12/2022
Oct/13/2022
Oct/14/2022
Oct/15/2022
Oct/16/2022
Oct/17/2022
Oct/18/2022
Oct/19/2022
Oct/20/2022
Oct/21/2022
Oct/22/2022
Oct/23/2022
Oct/24/2022
Oct/25/2022
Oct/26/2022
Oct/27/2022
Oct/28/2022
Oct/29/2022
Oct/30/2022
Oct/31/2022
Nov/01/2022
Nov/02/2022
Nov/03/2022
Nov/04/2022
Nov/05/2022
Nov/06/2022
Nov/07/2022
Nov/08/2022
Nov/9/2022
Nov/10/2022
Nov/11/2022
Nov/12/2022
Nov/13/2022
Nov/14/2022
Nov/15/2022
Nov/16/2022
Nov/17/2022
Nov/18/2022
Nov/19/2022
Nov/20/2022
Nov/21/2022
Nov/22/2022
Nov/23/2022
Nov/24/2022
Nov/25/2022
Nov/26/2022
Nov/27/2022
Nov/28/2022
Nov/29/2022
Nov/30/2022
Dec/01/2022
Dec/02/2022
Dec/03/2022
Dec/04/2022
Dec/05/2022
Dec/06/2022
Dec/07/2022
Dec/08/2022
Dec/9/2022
Dec/10/2022
Dec/11/2022
Dec/12/2022
Dec/13/2022
Dec/14/2022
Dec/15/2022
Dec/16/2022
Dec/17/2022
Dec/18/2022
Dec/19/2022
Dec/20/2022
Dec/21/2022
Dec/22/2022
Dec/23/2022
Dec/24/2022
Dec/25/2022
Dec/26/2022
Dec/27/2022
Dec/28/2022
Dec/29/2022
Dec/30/2022
Dec/31/2022
I have a picture with the word "NEW" over it to designate a new document that has been posted to our website. I would like to have jQuery remove the picture after 6 hours of it being posted. How would I go about doing this?
Here is the element:
<tr class="pointer">
<td>
<img class="germ" src="~/Image" width="40px" />
<i class="created" hidden="hidden">April 3, 2020 13:13:00</i>
Document Title
</td>
<td>PDF</td>
<td>March 2020</td>
</tr>
As you can see, I have a hidden <i> element that designates when the document was posted to the website. I need to remove the <img> tag 6 hours from the time in the <i> tag.
How can I do this using jQuery or JavaScript?
This would be better done server-side. The way you want to do it assumes that the user will have this same page up for 6+ hours, or come back to this page in the same state, which is pretty unlikely.
What I would do is add a property to the post for created and have it set a default time of Date.now(), and then have front end code look for whether that created value was less than 6 hours ago (1000 * 60 * 60 * 6 miliseconds).
If so, show the 'New' graphic. If not, don't.
Another way to do it so that you don't have to update server-side stuff that might be more set in stone is to have the default display for the "New" graphic to be true, then:
let createdTime = new Date(document.queryselector('i.hidden').textContent);
if (Date.now() - createdTime > (1000 * 60 * 60 * 6)){
//code to hide the "New" graphic
}
A little extra two cents for free: I would add an id attribute to that hidden i element to make sure you're selecting only that and not something else that may have the same class
Since you asked how to do this with JavaScript or JQuery, this is how.
I also included a 3-second example to show that it does work.
window.setTimeout(function() {
document.getElementById('sixHours').outerHTML = '';
}, 2160000);
window.setTimeout(function() {
document.getElementById('threeSeconds').outerHTML = '';
}, 3000);
<div id="sixHours">This will be removed after six hours</div>
<div id="threeSeconds">This will be removed after three seconds</div>
Keep in mind, that as soon as the page is refreshed, the timer will start over. If you want to avoid this and still have JavaScript handle it, you could have it removed at a definite time.
Edit
The snippet below will parse the date in expiration and find the milliseconds from that till now. Then like the snippet above, the remove element will get removed when the timer expires. 6 hours are added to the timer to make it expire 6 hours from the given time.
var expiration = Date.parse(document.getElementById('expiration').innerHTML);
var diff = expiration - Date.now();
window.setTimeout(function() {
document.getElementById('remove').outerHTML = '';
}, diff + 2160000);
//2160000ms = 6 hours
<div id="expiration">April 3, 2020 20:00:00</div>
<div id="remove">Will be removed by the date above</div>
Use setTimeout(), but bear in mind that people aren't likely going to sit at a single page for 6 hours meaning this will fail as soon as they navigate away. You'll have to change the time sent over every time they refresh.
const testing = true;
if (testing) {
// BEGIN - Fake date for testing
const tmpNow = new Date();
document.querySelector("i.created").innerHTML = tmpNow.toUTCString();
// END - Fake date for testing
}
const d = document.querySelector("i.created").innerHTML;
const dd = new Date(d);
if (testing) {
dd.setSeconds(dd.getSeconds() + 3);
} else {
dd.setHours(dd.getHours() + 6);
}
const ddd = dd.getTime();
const now = Date.now();
if (ddd < now) {
console.log("Too late");
}
const dt = Math.max(ddd - now, 0);
setTimeout(() => {
const img = document.querySelector("img.germ");
img.parentNode.removeChild(img);
}, dt);
<tr class="pointer">
<td>
<img class="germ" src="~/Image" width="40px" />
<i class="created" hidden="hidden">April 3, 2020 13:13:00</i> 03.21.2020 GOA - Alaska Businesses Now Eligible for SBA Economic Injury Disaster Loans (2)
</td>
<td>PDF</td>
<td>March 2020</td>
</tr>
You don't understand the problem here.
As R Greenstreet said it needs to be done server-side. You need a Create Post Date to be sent to UI.
Let's assume you have a JSON coming from a server where you can add createDate property of a post form bata base.
{createDate: date, name......}
You need to compare that date with Date.now()
Pseodu Code here:
if(createDate + 6 hours >= Date.now()) then hide your Icon.
You will need to use Date to convert the String into a Date Object:
new Date("April 3, 2020 13:13:00");
This will create a Date Object, yet since there is no Timezone Offset, the script might assume UTC. Your result might be:
"2020-04-03T13:13:00.000Z"
So consider specifying a Time Zone. Some browsers will assume the Users local Timezone.
$(function() {
function getDate(cObj, tz) {
if (tz == undefined) {
tz = "GMT-07:00";
}
var str = cObj.text().trim() + " " + tz;
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
var nDt = new Date(str);
console.log(str, nDt);
return nDt;
}
function getHoursPast(thn) {
// https://stackoverflow.com/questions/19225414/how-to-get-the-hours-difference-between-two-date-objects/19225463
var now = new Date();
return Math.floor(Math.abs(now - thn) / 36e5);
}
var hours = getHoursPast(getDate($(".created")));
console.log(hours + " have passed since", getDate($(".created")));
if (hours > 5) {
$(".germ").remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="pointer">
<td>
<img class="germ" src="~/Image" width="40px" />
<!--
Would advise better format
Example: 2020-04-03T13:00.000-7:00
-->
<i class="created" hidden="hidden">April 3, 2020 13:13:00</i> Document Title
</td>
<td>PDF</td>
<td>March 2020</td>
</tr>
</table>
References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
How to get the hours difference between two date objects?
Getting the client's timezone offset in JavaScript
I'd like to preface this saying I know very little JavaScript.
I have a Bootstrap datepicker using a date range, picked up from eternicode.
My goal is to select a day in startDate and then have the days available to endDate only be on or after startDate and within startDate's financial year.
Examples:
If I chose Oct 1st 2016, the endDate should cap out at Sep 30th 2017
If I chose Jan 12th 2017, the endDate should cap out at Sep 30th 2017
If I chose Sep 30th 2017, the endDate should also be Sep 30th 2017
Pretty much, if the startDate month is in [Oct, Nov, Dec] then
endDate caps out at Sep 30th (startDate year + 1) else endDate caps
out at Sep 30th (startDate year)
In my reportWebpage.cshtml file I have:
<div class="col-md-2">
Date Range:
</div>
<div class="col-md-5" id="dateRangeContainer">
<div class="input-daterange input-group" id="datepicker">
#Html.TextBox("startDate", "", new { #class = "input-sm form-control", name= "startDate" })
<span class="input-group-addon">to</span>
#Html.TextBox("endDate", "", new { #class = "input-sm form-control", name = "endDate" })
</div>
</div>
In my related.js I have a very basic datepicker setup:
$(function () {
$('#dateRangeContainer .input-daterange').datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true
});
});
I know there is a datesDisable property I can set, and while it's functionality is what I want it seems to be based off an array of dates which seems like the wrong idea here.
As a test, I replaced the datapicker js code above with what is shown below.
Like in this SO Answer I've tried adding an onSelect property to just the #startDate datepicker, but I'm not getting a response from the alert embedded, nor is Google Chrome's Dev Tools hitting the debug point placed on it:
$('#startDate').datepicker({
onSelect: function() {
var date = $(this).datepicker('getDate'),
day = date.getDate(),
month = date.getMonth() + 1, // Offset the zero index to match normal month indexes
year = date.getFullYear();
alert(day + '-' + month + '-' + year);
}
});
I was hoping that by doing that I could at least start building some if else loops or something.
I'm struggling to figure out how to even start with this problem, so any help or suggestions will be very much appreciated!
Edit 1:
I figured out that trying to disable a huge range of dates was the wrong way to view this problem, and that I should instead focus on utilizing the setStartDate and setEndDate properties.
Using some combined tips from these SO answers:
Bootstrap datepicker change minDate/startDate from another datepicker
Print Var in JsFiddle (This was mostly just a helper, giving credit where credit is due)
I mashed together this JSFiddle: http://jsfiddle.net/wsodjsyv/203/
Where it currently is, it does it's job of restricting to the proper financial year. I just need to tweak it so that when I clear End Date I'm able to move Start Date past that point again. Right now it'll require a refresh if I determine I want to move Start Date past Sept. 30 (whatever year got chosen)
Here is my new related.js file pertaining to the date picker; with this code I am able to restrict the date range to Start Date's fiscal year:
$(function () {
// Ranged datepickers
$('#dateRangeContainer .input-daterange').datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true
});
$('#startDate').datepicker().on('changeDate', function(selected) {
var endDate_Bottom = null;
var endDate_Cap = null;
if (selected.date != null) {
endDate_Bottom = new Date(selected.date.valueOf());
endDate_Cap = new Date(selected.date.valueOf());
if (endDate_Bottom.getMonth() >= 9 && endDate_Bottom.getMonth() <= 11) {
endDate_Cap = new Date(endDate_Bottom.getFullYear() + 1, 8, 30);
} else {
endDate_Cap = new Date(endDate_Bottom.getFullYear(), 8, 30);
}
}
$('#endDate').datepicker('setStartDate', endDate_Bottom);
$('#endDate').datepicker('setEndDate', endDate_Cap);
});
$("#endDate").datepicker().on('changeDate', function(selected) {
var startDate_Cap = null;
if (selected.date != null) {
startDate_Cap = new Date(selected.date.valueOf());
}
$('#startDate').datepicker('setEndDate', startDate_Cap);
}).on('clearDate', function(selected) {
var startDate_Cap = null;
$('#startDate').datepicker('setEndDate', startDate_Cap);
});
});
I've added some checks for when the date is null to avoid the console log being filled with errors when .valueOf() is called on an empty date.
I also brought back the dateRangeContainer block to handle the repeated options and to allow for the styling that highlights the date range selected in the calendar.
I have rendered the following data using my API,where 0 is like {{x.count}} and today,tomorrow and subsequent days are from the {{x.day}} from API.
0 Appoinments Today
0 Appoinments Tomorrow
0 Appoinments Wednesday
0 Appoinments Thursday
0 Appoinments Friday
My HTML view is like the below:
<span ng-repeat="x in scheduledAppointments_report"><a ng-click="test(x.day);">{{x.count}} Appoinments {{x.day}}</a> <br/><br/></span>
I want to retrieve the date on respective hyperlink clicks.
Kindly let me know the solution.
Thanks
Try something like:
<div ng-app>
<div ng-controller="MyApp">
Today
Tomorrow
</div>
</div>
And the code:
function MyApp($scope) {
$scope.today = new Date();
$scope.get_x_day_date = function(index) {
$scope.x_day = new Date();
$scope.x_day.setDate($scope.today.getDate() + index);
alert($scope.x_day);
return $scope.x_day;
}
}
Working example: http://jsfiddle.net/3agz0pw0/
I have a series of divs with unique dates that include the start of the week and end of the week associated with the content of the div. As seen below:
<div class="dinnersWeeks">
<div class="startingDate">8/25/2013 12:00 AM</div>
<div class="endingDate">8/31/2013 12:00 AM</div>
<div class="weekLinkMenus">testweek.aspx</div>
</div>
<div class="dinnersWeeks">
<div class="startingDate">9/1/2013 12:00 AM</div>
<div class="endingDate">9/7/2013 12:00 AM</div>
<div class="weekLinkMenus">generalweek11.aspx</div>
</div>
<div class="dinnersWeeks">
<div class="startingDate">9/8/2013 12:00 AM</div>
<div class="endingDate">9/14/2013 12:00 AM</div>
<div class="weekLinkMenus">generalweek12.aspx</div>
</div>
And I'm stuck trying to identify if the current date falls between the start date and end date of each week's div.
$('div.dinnersWeeks').each( function() {
sd = new Date( $(this).find( 'div.startingDate' ).text() );
ed = new Date( $(this).find( 'div.endingDate' ).text() );
currentDate = new Date();
console.log(check > sd && currentDate < ed);
});
After that I'll assign an ID to the div that is the current week and the div that is next week.
Any guidance would be greatly appreciated.
The following should work. I think checked was a typo in your original code. I also added an example of changing the background colour. This could be easily changed to set the id with your preference.
JavaScript
$('div.dinnersWeeks').each( function() {
sd = new Date( $(this).find( 'div.startingDate' ).text() );
ed = new Date( $(this).find( 'div.endingDate' ).text() );
currentDate = new Date();
if(currentDate > sd && currentDate < ed) {
$(this).css('background-color', 'red');
}
});
JSFiddle: http://jsfiddle.net/markwylde/4wuwZ/
Just on a side note, if you are wanting to do a lot of date related tasks in this project I would look into the moment.js framework, or one like it. There's a nice stackoverflow post over here explaining a tidy way you could do the above using it:
I assume you're outputting the HTML with a server side language? If that's the case, I would just add an attribute to the div with the Unix time and run the comparators off of that. I'm sure there's a library to do date comparisons in jQuery, but if you're not trying to do anything complicated you could just use Unix.
<div class="dinnersWeeks">
<div class="startingDate" z-start-unix="3000392">8/25/2013 12:00 AM</div>
<div class="endingDate" z-end-unix="3001394">8/31/2013 12:00 AM</div>
<div class="weekLinkMenus">testweek.aspx</div>
</div>
Then:
$('div.dinnersWeeks').each( function() {
currentDate = Math.round(new Date().getTime() / 1000);
console.log(check > $(this).find('div.startingDate').attr('z-start-unix') && currentDate < $(this).find('div.endingDate').attr('z-end-unix'));
});