Develop Reference

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.

Google visualization 12h format DataTable

I'm trying to get the googlevisualization datatable to show the time timeline in 12h format, but no luck so far.
google.load("visualization", "1");
google.setOnLoadCallback(new function () {
// Specify options
that.optionsContainer = {
animate: false, // Mieux pour les perfs
animateZoom: false, // Mieux pour les perfs
width: "1200px",
height: (75 + 25 * (maxGrouping + 1)) + "px", // <= abandonné
start: that.startDate,
end: that.endDate,
min: that.minDate,
max: that.maxDate,
hAxis: {
format: 'hh:mm a'
}
};
}
I've also seen this response - Change to a 24 hour format for datetime data in Google Charts - but I don't think that I'm applying it properly as I don t get any changes:
this.data= new google.visualization.DataTable();
this.data.addColumn('datetime', 'start');
this.data.addColumn('datetime', 'end');
this.data.addColumn('string', 'content');
this.data.addColumn('boolean', 'editable');
this.data.addColumn('string', 'type');
var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy hh:mm a' });
dateFormatter.format(this.data, 0);
I've also tried to set the locale to 'en-US', but it doesn't work:
that.optionsContainer = { locale: 'en-US' ...}
Any ideas?
Edit:
The this.data row looks like:
[Thu Dec 12 2019 17:30:05 GMT+0200 (Eastern European Standard Time), Thu Dec 12 2019 18:45:00 GMT+0200 (Eastern European Standard Time), "<div id="IP_1050" class= .. "Inactive from 5:30 PM to 6:45 PM"></div>", false, "range"]
and the draw method
this.timeline = new links.Timeline(document.getElementById('timeline-div123'));
this.timeline.draw(this.data, this.optionsContainer);
Edit2:
I'm using this library - https://almende.github.io/chap-links-library/js/timeline/doc/#Data_Format , which does not appear to have 12h support. I'll keep looking.

can't change assigned default value to input of type date angularjs

I have the following input
<input type="date" ng-model="startDateInput" ng-change="dateConvert()" />
And I set a default value since I call a service on the load of the page and need to pass the date as a parameter
$scope.startDateInput = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
console.log("$scope.startDateInput" + $scope.startDateInput)
But later on I want this value to be updated when the user touches the date input and selects a new date on the calendar that pops up.
The thing is, my value is not changed here.
stays the same as the default value.
$scope.dateConvert = function() {
var dateFrom = $scope.startDateInput;
$scope.params.startDate = dateFrom;
console.log("dateFrom " + dateFrom);
console.log(" $scope.params.startDate " + $scope.params.startDate);
}
the results of the log
dateFrom Wed Sep 13 2017 11:22:26 GMT+0100 (Western European Summer Time)
tab.accountStatement.controller.js:261 $scope.params.startDate Wed Sep 13 2017 11:22:26 GMT+0100 (Western European Summer Time)
It keeps the default value I assigned before, but why? How can I change this value?

angular.module('MyApp', [])
.controller('MyCtrl', function($scope,$filter){
$scope.default_date =$filter("date")(Date.now(), 'yyyy-MM-dd');
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<input type="date" ng-model="default_date" value="{{default_date}}">
<p>{{default_date}}</p>
</div>
</div>

Error when trying to parse Yahoo Weather JSON

I am writing my first simple HTML and JavaScript/JQuery page which connects to the Yahoo Weather API (https://developer.yahoo.com/weather/).
So far, I have been able to handle the JSON response in JQuery and update my HTML content using the following:
$('#text').html("Weather is: " + data.query.results.channel.item.condition.text);
So far, so good!
However, I am receiving a "SyntaxError: missing ) after argument list" error when trying to parse the following JSON using this JavaScript:
$('#day0day').html(data.query.results.channel.item.forecast.0.day);
I believe the error is caused by the '0' above but any help would be appreciated.

forecast is an array, so you need to use indexes in order to access the values within it.
$('#day0day').html(data.query.results.channel.item.forecast[0].day);
var data = {"query":{"count":1,"created":"2018-03-06T21:06:04Z","lang":"pt-BR","results":{"channel":{"units":{"distance":"km","pressure":"mb","speed":"km/h","temperature":"C"},"title":"Yahoo! Weather - London, England, GB","link":"http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-44418/","description":"Yahoo! Weather for London, England, GB","language":"en-us","lastBuildDate":"Tue, 06 Mar 2018 09:06 PM GMT","ttl":"60","location":{"city":"London","country":"United Kingdom","region":" England"},"wind":{"chill":"45","direction":"180","speed":"11.27"},"atmosphere":{"humidity":"67","pressure":"33423.67","rising":"0","visibility":"25.91"},"astronomy":{"sunrise":"6:36 am","sunset":"5:49 pm"},"image":{"title":"Yahoo! Weather","width":"142","height":"18","link":"http://weather.yahoo.com","url":"http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"},"item":{"title":"Conditions for London, England, GB at 08:00 PM GMT","lat":"51.506401","long":"-0.12721","link":"http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-44418/","pubDate":"Tue, 06 Mar 2018 08:00 PM GMT","condition":{"code":"26","date":"Tue, 06 Mar 2018 08:00 PM GMT","temp":"7","text":"Cloudy"},"forecast":[{"code":"39","date":"06 Mar 2018","day":"Tue","high":"10","low":"6","text":"Scattered Showers"},{"code":"28","date":"07 Mar 2018","day":"Wed","high":"9","low":"2","text":"Mostly Cloudy"},{"code":"30","date":"08 Mar 2018","day":"Thu","high":"8","low":"2","text":"Partly Cloudy"},{"code":"11","date":"09 Mar 2018","day":"Fri","high":"9","low":"1","text":"Showers"},{"code":"39","date":"10 Mar 2018","day":"Sat","high":"11","low":"8","text":"Scattered Showers"},{"code":"28","date":"11 Mar 2018","day":"Sun","high":"11","low":"6","text":"Mostly Cloudy"},{"code":"12","date":"12 Mar 2018","day":"Mon","high":"9","low":"6","text":"Rain"},{"code":"12","date":"13 Mar 2018","day":"Tue","high":"8","low":"4","text":"Rain"},{"code":"28","date":"14 Mar 2018","day":"Wed","high":"9","low":"4","text":"Mostly Cloudy"},{"code":"12","date":"15 Mar 2018","day":"Thu","high":"9","low":"5","text":"Rain"}],"description":"<![CDATA[<img src=\"http://l.yimg.com/a/i/us/we/52/26.gif\"/>\n<BR />\n<b>Current Conditions:</b>\n<BR />Cloudy\n<BR />\n<BR />\n<b>Forecast:</b>\n<BR /> Tue - Scattered Showers. High: 10Low: 6\n<BR /> Wed - Mostly Cloudy. High: 9Low: 2\n<BR /> Thu - Partly Cloudy. High: 8Low: 2\n<BR /> Fri - Showers. High: 9Low: 1\n<BR /> Sat - Scattered Showers. High: 11Low: 8\n<BR />\n<BR />\nFull Forecast at Yahoo! Weather\n<BR />\n<BR />\n<BR />\n]]>","guid":{"isPermaLink":"false"}}}}}}
console.log(data.query.results.channel.item.forecast[0].day); //This is your approach!
data.query.results.channel.item.forecast.forEach(f => $('#day0day').html($('#day0day').html() + ' - ' + f.day));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="day0day"></span>

how to combine values from Datepicker & Timepicker in one variable

I have angular App U I have Datepicker & Timepicker using angular-ui when user select date $Scope.dt and set time $Scope.mytime I am trying to combine in one $Scope.SelectedDateTime I get NaN. I don't know how to fix it
update
when user select date $scope.dt value will be 'ok when user select date it will 'Thu Mar 05 2015 00:00:00 GMT-0500 (Eastern Standard Time)' and $scope.mytime value 'Thu Mar 05 2015 23:30:00 GMT-0500 (Eastern Standard Time)' how to combine them in one variable
html
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
<button type="button" class="btn btn-sm btn-info" ng-click="SelectedDateTime()">Today</button>
javascript
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$Scope.mytime = new Date();
$scope.changed = function () {
$log.log('Time changed to: ' + $scope.mytime);
};
$scope.clear = function() {
$scope.mytime = null;
};
$Scope.SelectedDateTime = function()
{
var SelectedDateTime = $scope.dt +''+$scope.mytime;
}

I solved this problem using the same ng-model for Datepicker and Timepicker.
<input type="text" ng-model="myDateModel" datepicker-options="dateOptions" ... />
<uib-timepicker ng-model="myDateModel"...></uib-timepicker>
I hope it helps you too! Good luck!

You can't concatenate or try to add date objects as if they are numbers.
What you are basically trying to do is
new Date() +" "+ new Date()
Paste that line into browser console and you will see something like:
"Thu Mar 05 2015 21:54:37 GMT-0500 (Eastern Standard Time) Thu Mar 05 2015 21:54:37 GMT-0500 (Eastern Standard Time)"
You need to deal with them as Date objects and use appropriate Date prototype methods to manipulate them
Some of the methods you would need would be:
Date.prototype.getHours()
Date.prototype.setHours()
Above assumes that you are trying to actually create a new DateTime. If not it is not clear what your expected results are
Reference: MDN Date.prototype Docs