Develop Reference

Convert date from UTC to EST (Javascript, HTML)

I am using Vue to render some data, the problem is the date stored in the field created_at is in UTC (I need it to be in EST).
<div class="row">
<div class="col-md-3" v-for="result in results">
<div class="panel panel-default">
<div class="panel-heading">
<p>createdAt:{{ result._source.created_at }}
</div>
<div class="panel-body">
<p>text:{{ result._source.text }}</p>
</div>
</div>
</div>
</div>
I tried using this javascript variable to convert it but I'm not sure how to implement it.
<script>
var usaTime = new Date().toLocaleString("en-US", {timeZone: "America/New_York"});
console.log('USA time: '+ (new Date(usaTime)).toISOString())
</script>
Do I need to pass the value of created_at into a javascript function that will convert the date? Or could I just subtract eight hours from the date and then return it?

If you have a Date object which is in UTC, you can use your code to display it in a locale and timezone much as you did in your code.
Live demo:
var utcTime = new Date("2020-10-16T18:00:00Z");
console.log('UTC Time: ' + utcTime.toISOString());
var usaTime = utcTime.toLocaleString("en-US", {timeZone: "America/New_York"});
console.log('USA time: '+ usaTime)
So
Do I need to pass the value of created_at into a javascript function that will convert the date?
Yes, assuming your result._source.created_at value is formatted as a UTC date, you would pass it in and call toLocaleString to display it appropriately.
Perhaps something like:
<div class="panel-heading">
<p>createdAt:{{ new Date(result._source.created_at).toLocateString("en-US", {timeZone: "America/New_York") }}</p>
</div>

Can I get help formatting my future dates javascript?

Working on a weather app that includes a 5 day forecast and I would like the dates displayed. I cant figure out how to format it to just month, date and year (ex: July 23rd 2020) which should be 'll'. It's still showing as "Jul 23 2020 Fri Jul 24 2020 19:54:06 GMT-0700 (Pacific Daylight Time) Day" instead of formatting properly.
Here is my HTML:
<div class="row">
<div class="col" id = "one" ></div>
<div class="col" id = "two" > Day Two</div>
<div class="col" id = "three" > Day Three</div>
<div class="col" id = "four" > Day Four</div>
<div class="col" id = "five" > Day Five</div>
</div>
And here is my javascript:
const tomorrow = new Date()
tomorrow.setDate(new Date(ll).getDate() + 1);
var one = document.getElementById('one');
one.innerHTML = tomorrow;

Assuming the format you needed is always like you mentioned
function format(date){
var months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var suffices={_0:'th',_1:'st',_2:'nd',_3:'rd',_4:'th',_5:'th',_6:'th',_7:'th',_8:'th',_9:'th',_11:'th',_12:'th',_13:'th'};
return months[date.getMonth()]+' '+date.getDate()+(suffices['_'+date.getDate()] || suffices['_'+date.getDate()%10])+' '+date.getFullYear();
}
Usage
format(new Date())//returns "Jul 24th 2020"
format(new Date(2020,11,13))//returns "Dec 13th 2020"

if you are simply wanting the left side of the date, all you have to do is parse the date string. Something like this:
var mydate = new Date().toString().split(' ');
var formattedDate = b = a[1] + " " + a[2] + " " + a[3];
if you're insistent on the "rd" after your number, that will require a lookup table like in some other answers. This code splits the string into an array of strings by space then combines the 2nd, 3rd, and 4th elements into a new string.

How to retrieve the current date and subsequent dates on click

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/

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/