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>
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'm trying to display date time using 12-hour format:'dd-MMM-yyyy HH:mm a'
The expected result is for ex.: 27-DEC-2016 12:30 AM
The actual result is : Dec 27, 2016
The old result without using any formats is:2016-12-22T13:22:00Z
HTML Code:
{{pickuptime | date:defaultDateTimeFormat}}
Controller Code:
$scope.defaultDateTimeFormat = "dd-MMM-yyyy HH:mm a";
var app = angular.module("app", []);
app.controller("myCtrl", function($scope) {
$scope.date = new Date();
$scope.defaultDateTimeFormat = "dd-MMM-yy h:mm a";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
{{date | date:defaultDateTimeFormat}}
</div>
With your input
It is coming in 24 Hrs format
var app = angular.module("app", []);
app.controller("myCtrl", function($scope) {
$scope.date = new Date();
$scope.defaultDateTimeFormat = "dd-MMM-yyyy HH:mm a";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
{{date | date:defaultDateTimeFormat}}
</div>
See for more details here
<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
Currently I have the following binding in my view:
<p>{{claim.date}}</p>
Which contains something like this:
Oct 19, 2015 4:34:00 PM
I want to format it so that it displays like this:
Oct 19, 2015
Looking at all the AngularJS date filters I see that I need to do this:
<p>{{claim.date | date : 'mediumDate'}}</p>
However nothing is happening. Am I doing this right?
var app = angular.module("App", []);
app.controller("Ctrl", function($scope) {
$scope.date = "Oct 19, 2015 4:34:00 PM";
$scope.date2 = new Date("Oct 19, 2015 4:34:00 PM");
});
app.filter('stringToDate', function() {
return function(input) {
return new Date(input);
};
});
app.filter('stringToDateFormat', function($filter) {
return function(input, format) {
return $filter("date")(new Date(input), format);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App" ng-controller="Ctrl">
<div>
{{date | stringToDate |date: "mediumDate"}}
</div>
<div>
{{date | stringToDateFormat: "mediumDate"}}
</div>
<div>
{{date2 | date: "mediumDate"}}
</div>
</body>
Check below snippet. It working fine for date object. Make sure that your object is date object, not string.
angular.module('myApp', []).controller('MyCtrl', function($scope) {
$scope.date = new Date();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<p>{{date}}</p>
<p>{{date | date : 'mediumDate'}}</p>
</div>