Develop Reference

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>

Angular, Angular-ui : Date - Different ouput format

My date is a string in this format:
Dec 31, 1969 7:00:00 PM
I want to show a shorter date on the view so i do this with angular
<input ui-date="{ dateFormat: 'yy-mm-dd' }" ui-date-format ng-model="project.date" />
But then project.date is no longer the old format but the unix one (I think) :
1969-12-09T05:00:00.000Z
But i want to ouptput it in the previous format :
Dec 31, 1969 7:00:00 PM
How could i do this?

use Date filter, exp : {{yourDate | date:'medium' }}
check this : http://docs.angularjs.org/api/ng.filter:date

You can do the following:
<input ui-date="{ project.date | date : 'medium'}" ui-date-format ng-model="project.date" />
in you html tag or in your ctrl
$scope.today = $filter('date')(project.date,''MMM d, y h:mm:ss a'');
make sure you dependent inject $filter to your ctrl
To see more of date formats here

jQuery countdown plugin multiple instances not working

i have problem with my script using jquery.countdown.js plugin, it doesn't sets multiple instances for each element i pass it to, it always sets the first instance for all, so countdowns are always the same.
link to plugin : http://keith-wood.name/countdown.html
$(function(){
$.each($('.countdown'), function() {
var _element = '.countdown-'+$(this).attr("id");
if($(_element).length > 0){
var _expDate = $(_element).attr('data-expiration').split(',');
var _datetime = Date(_expDate);
init_countdown(_element,_datetime);
}
});
});
function init_countdown(_element,_datetime){
console.log(_element + ", " + _datetime)
$(_element).countdown({
until: _datetime,
format: 'yowdHMS'
});
}
HTML:
<h5 class="muted countdown countdown-1" id="1" data-expiration="2014,10,26,14,10,35"> 2014-10-26 14:10:35</h5>
<h5 class="muted countdown countdown-2" id="2" data-expiration="2014,10,26,16,10,35"> 2014-10-26 16:10:35</h5>
<h5 class="muted countdown countdown-3" id="3" data-expiration="2014,10,26,18,10,35"> 2014-10-26 18:10:35</h5>
this is how it outputs
how can i fix this?
console.log()
.countdown-1, Sun Oct 28 2012 22:10:09 GMT+0100 (CET)
.countdown-2, Sun Oct 28 2012 22:10:09 GMT+0100 (CET)
.countdown-3, Sun Oct 28 2012 22:10:09 GMT+0100 (CET)
#Asad example:

The date constructor (in the form you are using it) accepts several integer values, not an array. You need to turn each value in the array that results from your split into a integer (using parseInt), then pass each argument individually, and not as an array.
Try this:
var _expDate = $(_element).attr('data-expiration').split(',');
_expDate.forEach(function(v,i,a){a[i]=parseInt(a[i]);});
var _datetime = new Date(_expDate[0],_expDate[1],_expDate[2],_expDate[3],_expDate[4],_expDate[5]);