I am trying to compare dates coming from a bootstrap datepicker and this format 11/05/2008. I tried using the Date.parse:
app.filter('dateRange', function(){
return function(items, fr,to){
var arrayToReturn = [];
for (var i=0; i<items.length; i++){
var testing =Date.parse(items[i].date) > Date.parse(fr) && Date.parse(items[i].date) < Date.parse(to);
if (testing)
{
arrayToReturn.push(items[i]);
}
}
return arrayToReturn;
};
});
The filter is supposed to filter on a datefrom to a dateto range. At the moment I am having issues with comparing the date formats. How can I change the directive so I can compare the dates?
plunkr: http://plnkr.co/edit/gNswudddB6NY0dL55IR7?p=preview
At least in your plunker the problem is that you're using a date field, which only accepts inputs in a yyyy-MM-dd format according to https://docs.angularjs.org/api/ng/input/input%5Bdate%5D. This causes the from and to fields to be undefined in your filter, since the date isn't valid according to angular. Changing the input type to text solves the issue.
Updated plunker (try entering 01/01/2015 and 01/01/2016 for example):
http://plnkr.co/edit/Y0qRjK6Lujg3t4b0Wdle?p=preview
Related
I have a date in this format "2017-06-26 10:21:25.88785". My purpose is to show this kind of format 'dd/MM/yyyy hh:mm:ss', and put this date into a ng-table. So, I write in my ng-table
{{::fondo.aggTms | date:'dd/MM/yyyy hh:mm:ss'}}
Where fondo is my variable and aggTms is the attribute of the main variable.
Unfortunately, it doesn't work, and in my table is shown the first (wrong) format.
Anyone could help me?
You can try rounding of last seconds part Then covert it into date & then try the angular filter. the function to be called in place of fondo.aggTms is
$scope.toDate = function(date){
var res = date.split(":");
var last = window.Math.round(res[2]);
var datestring = res[0]+':'+res[1]+':'+last;
var d = new Date(datestring);
return d;
}
{{::toDate(fondo.aggTms) | date:'dd/MM/yyyy HH:mm:ss'}}
This is the working plunker link: https://plnkr.co/edit/7OHqUmxnjfs89mCMCF3M?p=preview
Now this's only valid if you're considering that last part as seconds in decimal.
How to convert above all the date into YYYY-MM-DD format? I have used this way but it's not working.
$scope.dateDatas = [0:"29-09-2016", 1:"30-09-2016",2:"01-10-2016",3:"02-10-2016",4:"03-10-2016"]
angular.forEach ($scope.dateDatas,
function (value) {
var d = $filter('date')(value, 'yyyy-mm-dd');
console.log(d);
});
How about this:
$scope.dateDatas = ["29-09-2016", "30-09-2016", "01-10-2016", "02-10-2016", "03-10-2016"];
$scope.result = [];
angular.forEach ($scope.dateDatas, function (value) {
var splitValue = value.split("-");
var date = new Date(splitValue[2], splitValue[1] - 1, splitValue[0]);
var res = $filter('date')(date, 'yyyy-MM-dd');
$scope.result.push(res);
console.log(res);
});
Here are the issues:
On the first line, the there shouldn't be any pairs in an array, remove the 'key', and keep the value:
$scope.dateDatas = ["29-09-2016", "30-09-2016", "01-10-2016", "02-10-2016", "03-10-2016"];
As a side note, remember also to put semicolon after the array.
$filter('date') will work on dates, not on strings. You first need to convert your initial string to a date object. I got the code to convert this string to Date from here. Also note that you need to decrease the month value by 1 before passing it to Date constructor because month in Date constructor is 0-based for some reason (expects 0 for January, 1 for February etc):
var splitValue = value.split("-");
var date = new Date(splitValue[2], splitValue[1] - 1, splitValue[0]);
The filter parameter should be 'yyyy-MM-dd' instead of 'yyyy-mm-dd' (capital M's), because small m's represent minutes instead of months and will give you this result:
["2016-00-29", "2016-00-30", "2016-00-01", "2016-00-02", "2016-00-03"]
Also check full example on plunker.
We have legacy birth date data in the format of YYYYMMDD (20151022). Angular and the ui-bootstrap datepicker obviously don't like this format. Also, our new UI requirements are to display the format as MMM, d YYYY (Oct, 22 2015). I'm not seeing a way to enforce a non-standard date format (for data, not for display) in the documentation. Is this not supported or am I just overlooking it?
I assume your datepicker is bound to a variable - ng-model="date". Then simply $watch this variable and do the nessecary formatting when a string is assigned to it :
$scope.date = '';
$scope.$watch('date', function(newValue, oldValue) {
if (typeof newValue == 'string') {
var tempDate = new Date(
newValue.substr(4,2)+'-'+
newValue.substr(6,2)+'-'+
newValue.substr(0,4)
);
$scope.date = !isNaN(tempDate.getTime()) ? tempDate : new Date();
}
})
This will return a valid date object if you have assigned a string to date on the format yyyymmdd; if something has gone wrong date will be set to today.
$scope.date = '20151022'; //set the datepicker to 10-22-2015
$scope.date = new Date('01-01-1900') //etc works as usual
In order to use a display format on the form Oct, 22 2015 you are almost right, it should just be lowercase y's :
uib-datepicker-popup="MMM, d yyyy"
the above in a plnkr -> http://plnkr.co/edit/ne60bBaTuca7wajTHP9w?p=preview
I am unable to work out how to display a date which is one or more days/months/years in the future from that being input by the user.
For example:
<input ng-model="startDate" type="date" id="start-date" name="startDate">
Which is to be displayed below:
<p>The start and end dates are: {{startDate | date}} and {{endDate() | date}}.</p>
The endDate function is as follows:
$scope.endDate = function() {
if($scope.startDate) {
var endDate = $scope.startDate;
return endDate.setYear(endDate.getYear() + 1);
}
}
Whilst the startDate displays, the endDate() does not. This happens whether or not I wrap it in the if statement.
I'd strongly suggest using the moment.js library for any AngularJS related date maths. Very easy addition and subtraction etc functions for date objects.
http://momentjs.com/
Example
$scope.date = moment().add(1, 'months') will add a month to the current date.
I've created a duration timer in angular js, using angular 'date' filter.
For some reason, the hour part starting with '2' instead of '0'.
I'm using the filter like this
{{runningDuration | date:'HH:mm:ss'}}
http://jsfiddle.net/rpg2kill/vNdpu/
What am I doing wrong?
It's because you want to format a date but pass it a difference between dates as an integer. Angular then assumes you want new Date(runningDuration).
You can use a filter to convert the date to utc(this probably requires more corner case handling than just number and date). Demo
JS
myApp.filter('utc', [function() {
return function(date) {
if(angular.isNumber(date)) {
date = new Date(date);
}
return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
}
} ]);
HTML
{{runningDuration | utc | date:'HH:mm:ss'}}