I have a decimal value in minutes with the value 3361 and need to convert in hours and present in this format: 56:01:00
I tried this code:
$scope.myTime = new Date(1970, 0, 1).setMinutes(3361);
<input type="text" class="form-control" ng-model="myTime | date:'HH:mm:ss'">
But the result is not that I expected: 08:01:00
I fear that you can't acheive what you need using angular date filter.
You can create you custom filter (here angular official guide) and build the result in the format you need.
For example, you can create a moment duration using moment.duration(3361, 'minutes'); and then use moment-duration-format to get the duration in the HH:mm:ss format.
Here a full live example:
angular.module('MyApp', [])
.filter('durationFormat', function() {
return function(input) {
input = input || '';
var out = '';
var dur = moment.duration(input, 'minutes');
return dur.format('HH:mm:ss');
};
})
.controller('AppCtrl', function($scope) {
$scope.myTime = 3361;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
<div ng-app="MyApp" ng-controller="AppCtrl">
{{ myTime | durationFormat }}
</div>
Another way to get the same output is using angular-moment-duration-format that has filters to use and display moment duration. You can create your duration using amdCreate specifying 'minutes' unit and then format it using amdFormat.
Here an example:
angular.module('MyApp', ['angularDurationFormat'])
.controller('AppCtrl', function($scope) {
$scope.myTime = 3361;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
<script src="https://cdn.rawgit.com/vin-car/angular-moment-duration-format/0.1.0/angular-moment-duration-format.min.js"></script>
<div ng-app="MyApp" ng-controller="AppCtrl">
{{ myTime | amdCreate:'minutes' | amdFormat:'HH:mm:ss' }}
</div>
PS. I'm the creator of angular-moment-duration-format.
There are no built-in AngularJS date/time filters that will accomplish what you're trying to display.
You can however create a custom AngularJS filter which will achieve what you're looking for.
% 60 will give you minutes spared. Then you can simply subtract and divide it by 60 to get number of hours.
function minutesToHours(min) {
var minutes = min % 60;
var hours = (min-minutes)/60;
minutes = minutes < 10 ? '0' + minutes : minutes;
return hours+':'+minutes+':00';
}
console.log(minutesToHours(3361));
Try changing your scope with below also add $filter in your controller
$scope.myTime = $filter('date')(new Date(1970, 0, 1).setMinutes(3361), 'HH:mm:ss');
Related
I want to display date in dd-mm-yyyy format my angualarjs code is :
var tabledata = [];
tabledata.push('<td class="myclass">' + value[1][0] + '</td>')
I tried using below code :
tabledata.push('<td class="myclass" ng-bind="date:'+'"dd-mm-yyyy"'+">+value[1][0]"+"</td>")
This is not working. Showing the below in html:
<td class="myclass" ng-bind="date:" dd-mm-yyyy"="">+value[1][0]</td>)
Is there any alternative to achieve this?.
I think the date pipe is what you need. Check the below example for reference.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.date = new Date();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
{{date | date: 'dd-mm-yyyy'}}
</div>
I am trying to convert date from my angular code
"/Date(1481843459627)/" to any understandable date format.
I tried this link but i was successful only if input was a time stamp.
Any suggestions ?
Something like this:
{{1481843459627 | date:'medium'}}
Easy and sleek.
In JavaScript you can simply use:
var dateNew = new Date(1481843459627);
You can format date by creating a filter which will convert that date to your formatted output.
var app = angular.module('app',[]);
app.filter('ctime', function($filter){
return function(jsonDate){
var date = new Date(parseInt(jsonDate.substr(6)));
var filterDate = $filter('date')(date, "MMMM d, y");
return filterDate ;
};
});
app.controller('fCtrl', function($scope){
$scope.date = '/Date(1481843459627)/';
});
Then you can do in html like this
<p ng-bind="date | ctime"></p>
You could directly use the format in view page or filter in the controller. https://docs.angularjs.org/api/ng/filter/date
<div ng-app="app">
<div ng-controller="homeCtrl">
{{date | date :'dd/MMM/yyyy'}}
</div>
</div>
Parse the date into the required date format. Because the mentioned value isn't the valid date format. So to convert the date first need to convert into the correct format. like as 1481843459627 and need to remove the remaining string.
var val ="/Date(1481843459627)/";
var date = new Date(parseInt(val.substr(6)));
Use simple angular date filtes for this purpose.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>Date = {{ today | date }}</p>
<p>{{today | date:'dd-MM-yyyy'}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function ($scope) {
$scope.today = 1481843459627; //Your date parameter
});
</script>
<p>The date filter formats a date object to a readable format.</p>
</body>
</html>
Find more about angular date filters here
I don't know how can I add 6 hours to input date in AngularJS.
I've try this :
var eventStart = new Date ($scope.event.startdateid);
var startDate = new Date ( eventStart );
startDate.setHours ( eventStart.getHours() + 6 );
event.startdateid = new Date(startDate).toJSON();
But nothing happen ...
This is my HTML :
<input type="date" name="startdateid" ng-model="event.startdateid" min="{{date | date:'yyyy-MM-dd'}}">
Can you tell me when I make mistake ?
Thank you !
First you don't need to convert nothing to JSON and your code seems correct (disregarding the fact that you aren't using even the $scope or controllerAsSyntax to send your variables to view -I'll prefer to think it was just to put here in question-), maybe you may have made some mistakes in his view.
So you just need to use ngChange directive to achieve this.
Here is a snippet working:
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.setHours = function() {
$scope.event.startdateid.setHours($scope.event.startdateid.getHours() + 6);
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<input type="date" name="startdateid" ng-model="event.startdateid" min="{{date | date:'yyyy-MM-dd'}}" ng-change="setHours()">
<hr>
<!-- The date with +6 hours -->
<span ng-bind="event.startdateid | date:'yyyy-MM-dd HH:mm'"></span>
</body>
</html>
Why not momentJS?
moment(someDate).add(6, 'hours');
I'd recommend using Datejs
One way by doing it in JavaScript pure, no third party lib:
Date.prototype.addHours = function(h) {
this.setTime(this.getTime() + (h*60*60*1000));
return this;
}
Or just update the time for 6 more hours Like your code:
startDate.setTime(this.getTime() + (6*60*60*1000));
<p id="appt_time" ng-if="x.dateTime | date: MM/dd/yyyy == {{todaysDate}}">SHOW ME IF TRUE{{todaysDate}} </p>
Plunkr:https://plnkr.co/edit/r2qtcU3vaYIq04c5TVKG?p=preview
x.dateTime | date: MM/dd/yyyy gets a date and time which turns out to be when filtered: 06/18/2016 according to my json file.
What I'm trying to accomplish is to compare this "x.dateTime" to today's date and show the paragraph if the statement is true. So in my angular file, I have a $scope.todaysDate = "06/18/2016", but the paragraph doesn't show.
HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="x in information">
<!--Compare Json Object to Javascript Object-->
<p ng-if ="x.dateTime">{{x.dateTime | date: MM/dd/yyyy }}</p>
<!--Compare Json Object to Today's Date-->
<p id="appt_time" ng-if="x.dateTime.valueOf() === todaysDate.valueOf()">Open in: {{todaysDate}} </p>
</div>
</body>
</html>
JS File:
// declare a module
var myAppModule = angular.module('myApp', []);
var todaysDate = new Date();
// configure the module.
// in this example we will create a greeting filter
myAppModule.controller('myCtrl', ['$scope','$http', function($scope, $http)
{
$scope.todaysDate = todaysDate;
$scope.test = "Volvo";
$http.get("time.json")
.then(function(data) {
$scope.information = data;
});
}]
);
JSOn file:
{
"dateTime":"2016-06-18T18:41:00.748-04:00"
}
Because you're dealing with dates and times, things can get tricky fast. I would suggest using the Moment.js library, as it makes this super easy:
ng-if="moment.utc(x.DateTime).isSame(todaysDate, 'day')"
The "day" there indicates how granular you want to compare the two values. However, it's relatively easy even without that library:
ng-if="x.DateTime.substring(0, 10) === todaysDate"
Where you change $scope.todaysDate to "2016-06-18".
You can add a validate function which will return true if date is today. Don't forget to inject $filter.
$scope.validate = function(date) {
return $filter('date')(date. 'your format') === $filter('date')(new Date(). 'your format');
}
In html
<p id="appt_time" ng-if="validate(x.dateTime)">SHOW ME IF TRUE{{x.dateTime}} </p>
See the foll link:
https://plnkr.co/edit/ZLJB5i1nQu9RYUV5FAX3?p=preview
// time.json
[{
"dateTime":"2016-06-18T18:41:00.748-04:00"
}]
//script.js
$http.get("time.json")
.then(function(response) {
$scope.information = response.data;
debugger
});
Your problem is solved
I was having time="2015-06-26T18:50:07.000Z" as I am using angularv1.1 ,I can not use UTC and I dont have milliseconds as well,
What I have is only this time string
In HTML
<div ng-app='myapp' ng-controller="myctrl">
{{date | date:"MM/dd/yyyy" }}
</div>
In Controller
var x="2015-06-26T18:50:07.000Z"
var app=angular.module('myapp',[]);
app.controller('myctrl',function($scope){
$scope.date=x;
});
Where I want output as 06/26/2015 and it is showing 06/27/2015 may be problem of GMT or UTC whatever .
Please suggest me ,What can I do to show 06/26/2015
Fiddle:http://jsfiddle.net/obv10wd9/2/
Please check this one.
You can do like this.
var x="2015-06-26T18:50:07.000Z"
var app=angular.module('myapp',[]);
app.controller('myctrl',function($scope){
var date=new Date(x);
$scope.date = new Date(date.getTime() +(date.getTimezoneOffset()*60000));
console.log(typeof $scope.date)
});
Here is the updated Fiddle