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
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>
Convert a date format to normal date format like:
12-07-2017
My output is coming like:
/Date(1508896907290)
I am using angular js.
{{list.DateStamp}}
any solutions??
convert binary format to general format?
I have tried a lot but not working.
#*{{list.DateStamp | date:"MM/dd/yyyy 'at' h:mma"}}*#
#*<span class="">{list.DateStamp | date}}</span>*#
Use a custom filter like in below example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.mydate = 1509046061730;
})
.filter('datfilter', function($filter) {
return function(date, format) {
return $filter('date')(new Date(date), format)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Orginal date: {{mydate}}</h1>
<h1>Filtered date: {{mydate|datfilter:'dd.MM.yyyy'}}</h1>
</div>
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