How to retrieve the current date and subsequent dates on click - javascript

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/

Related

Add a row per day or week automatically for multiple years (w/ using script or function ?)

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

Update Bootstrap Date Range Datepicker to only allow for end date to be within the start date's fiscal year

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.

Document Write On Certain Hours & Days

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.

How to Display a p tag if WordPress comment date below April 2014?

I need to display a HTML when the comment date below April 2014 . This is my wordpress date code
<time datetime="2014-05-26T12:19:33+00:00">May 26, 2014 at 12:19 pm</time>
I want to display following HTML
<p class="comment-rating"> <img src="#"><br>Rating: <strong>5 / 5</strong></p>
Is this possible?
Normaly you should show the attemp of what you've tried so far.
Here is one way to do it:
$(function () {
var checkDate = new Date("2014-05-01");
$.each($("time"), function () {
var $timeItem = $(this);
var currentDate = new Date($timeItem.attr("datetime"));
if (currentDate < checkDate) {
$timeItem.after('<p class="comment-rating"> <img src="#"><br>Rating: <strong>5 / 5</strong></p>');
}
});
});
Demo:http://jsfiddle.net/36bg4/2/

Date of element with current date and assign unique ID

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'));
});

Categories

Resources