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
Related
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.
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>
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>
I want to limit the Angular UI Datepicker to be between two dates passed in as variables. Preferably I'd like to get it working without adding a library like momentjs, because this is the only field in which I need to work with dates.
Here is a plunker of this problem:
http://plnkr.co/edit/zsjpoVZtHqJLIP2RW6vm?p=preview
here are the variables:
mycurrentdate = '2016-04-18'
mymindate = '2016-04-01'
mymaxmonth = '2016-05-01'
mymaxdate will be calculated from mymaxmonth to be
mymaxdate = '2016-05-31'
My actual max date will be the the last day of mymaxmonth
$scope.maxDate = new Date(
$scope.mymaxmonth + (TO THE END OF THE MONTH)
);
One thing to note is that running it through new Date() returns a date that is the day before the given date. For example:
$scope.minDate = new Date(
$scope.mymindate
);
$scope.minDate returns Wed Mar 30 2016 17:00:00 GMT-0700 (PDT) I looked up the reason for why it returns March 30 instead of April 1st and it seems like a timezone error?
I want to set a mymindate of '2016-04-01' and get mymaxdate = '2016-05-31' and disable all dates outside of this range. I've read Beginners Guide to Javascript Date and Time and tried it out here.
In the controller I have:
$scope.mymindate = '2016-04-01';
$scope.mymaxmonth = '2016-05-01'; //want mymaxdate to be '2016-05-31'
$scope.minDate = new Date($scope.dt.getFullYear(), $scope.dt.getMonth(), 1);
$scope.maxDate = new Date($scope.dt.getFullYear(), $scope.dt.getMonth() + 1, 0);
In the template I have:
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
you need to set datepicker-options with proper option for your input to disable date. In your example used datepicker-options="dateOptions" but in your controller didn't declare dateOptions.
So you need to set dateOptions for maxDate and minDate. like
$scope.dateOptions = {
maxDate: new Date($scope.maxDate),
minDate: new Date($scope.mymindate)
};
and set maxDate and minDate like:
$scope.mymindate = new Date('2016-04-01');
$scope.mymaxmonth = new Date('2016-05-01'); //wanted mymaxdate to be '2016-05-31'
$scope.minDate = new Date($scope.mymindate);
$scope.maxDate = new Date($scope.mymaxmonth.getFullYear(),$scope.mymaxmonth.getMonth()+1,0);
and HTML:
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min="minDate" max="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
Can see Plunker Demo and hopefully it will help you :)
After some annoying date manipulations, I got it.
Here is the working plunker:
http://plnkr.co/edit/6U4YdTIyFXjOqRJm2qTq?p=preview
In my controller I have:
var mindate = new Date($scope.mymindate);
$scope.minDate = new Date(mindate.getTime()+(1*24*60*60*1000)); //Due to poor design by the authors of ECMA-262 the date is parsed to be a day behind, so we must add a day
var maxdate = new Date($scope.mymaxmonth);
$scope.maxDate = new Date(maxdate.getFullYear(), maxdate.getMonth() + 2, 0); //Add a month to get to the end of the month.
$scope.dateOptions = {
maxDate: $scope.maxDate,
minDate: $scope.minDate,
};
In my template:
datepicker-options="dateOptions"
I didn't end up needing min-date or max-date because dateoptions covers both. I'll be honest, not sure why you have to add two to the macdate.getMonth() instead of just one, but it worked out.
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]);