I am getting date from server via json.The json data date format is MM-dd-yyyy.but i need to display it like dd-MM-yyyy.I am used normal angular date filters but its not working.
{{item.date | Date:'dd-MM-yyyy'}}
Why its not working? Is there any better way?
Remove capital letter from Date filter and see your " item.date " is it string or date.
If it is string then not filter that date otherwise its working
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.CurrentDate =new Date('10-30-2016');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="datCtrl">
{{CurrentDate | date:'dd-MM-yyyy'}}
</div>
Try this:
{{item.date |date: 'dd MMMM yyyy'}}
This filter statement should work:
{{ item.date | date: 'dd-MM-yyyy' }}
Reference : How to change date format using date filter
Related
I'm trying to set a default value in my ionic date picker but it just seems to be ignored.
The versions are;
Ionic "1.3.2"
Node v14.15.4
AngularJS v1.8.0
ion-datetime-picker.min.js (not sure of this version)
So far I've tried this;
<div class="row">
<div class="col col-33">
<strong> DOB: </strong>
</div>
<div class="col">
<span ion-datetime-picker date ng-model="data.demographics.pmiDOB">
{{data.demographics.pmiDOB | date: "dd/MM/yyyy"}}
</span>
</div>
</div>
$scope.data.demographics.pmiDOB = "2022-04-21"; //new Date(1974,3,24).toISOString();
I understand that the date picker needs an iso date format but no matter what I try the date picker when rendered just shows today's date?
Thx.
I found the solution with this;
let dateString = $scope.data.demographics.pmiDOB;
let [day, month, year] = dateString.split('/')
const dateObj = new Date(+year, +month - 1, +day)
$scope.data.demographics.pmiDOB = dateObj;
I have a form that I want to get from the template cache as string:
<script type="text/ng-template" id="info.html">
<p> {{ 'COMMON.NAME' | translate }} </p>
</script>
When I call $templateCache.get('info.html') I get the untranslated string of the template above:
<p> {{ 'COMMON.NAME' | translate }} </p>
What I want to get is the translated version which looks like this:
<p> name </p>
Is there any way to do that with templateCache?
You need to use ngBindHtml
$scope.commonName = $templateCache.get('info.html')
Then in the view:
<p ng-bind-html="commonName | translate"></p>
It is important that you add angular-sanitize to your project and inject it to your app module.
angular.module('app', ['ngSanitize'])
I need to convert date '02-01-2017' to '2017-01-02'.How can I do this in angularjs.Please help me.Thanks in advance.
This should do,
var date = "02-01-2017";
var newdate = date.split("-").reverse().join("-");
console.log(newdate);
DEMO
var date = "02-01-2017";
var newdate = date.split("-").reverse().join("-");
console.log(newdate);
You can use angular js date filters for this purpose. The date filter syntax is like
{{ date | date : format : timezone }}
where format is your required format i.e, yyyy-dd-MM and timezone that you prefer. You can find examples for this here and documentation at
angular js website
In chrome you can directly use new Date('02-01-2017'); but in firefox there are some compatibility issues so that the date string needs to be written as new Date('02/01/2017'); this will support in chrome also. Your date time stamp needs to be "IETF-compliant RFC 2822 timestamp". You can find the details regarding the compatibility issues here.
<!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 In Chrome {{ date | date:"yyyy-dd-MM" }}</p>
<p>Date In FireFox {{ dateFF | date:"yyyy-dd-MM" }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function ($scope) {
var dateTimeString = '02-01-2017';
$scope.date = new Date(dateTimeString);
$scope.dateFF = new Date(dateTimeString.replace("-", "/"));
});
</script>
<p>The date filter formats a date object to a readable format.</p>
</body>
</html>
How to display the Timezone information along with Date & Time using Angularjs:
I am trying to display Date and Time using the binding defined below:
{{data.filterData.run_date|date:'h:mm a'}} on {{data.filterData.run_date|date:'M/d/yy'}}
Something like above showing IST for India, CST for US and correct timezones for every end user and conversion.
UPDATE
I am getting the data in below format and in UTC format but is auto-converted by browser by clients machine:
2015-10-26T08:46:05+0000
How can we show the abbreviated Timezone as per above format or converted date and time & not specifically in UTC? As i have different clients and end users; so this should be dynamic to end user.
Thanks in advance!
But in versions 1.3.x only supported timezone is UTC,You can use external js if working with 1.3.x like Moment js
{{ user Defined date| date: 'MMM d, y H:mm:ss' : 'UTC' }}
Since version 1.4.0-rc.0 AngularJS supports other timezones too.
In HTML Template Binding
{{ date_expression | date : format : timezone}}
In JavaScript
$filter('date')(date, format, timezone)
More...
use the following code:
<html>
<head>
<title>Localization App</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope)
{
$scope.CurrentDate = new Date();
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
Date : {{CurrentDate | date:'dd/MM/yyyy'}} </br>
Date_1 : {{CurrentDate | date:'dd, MMMM yyyy'}} </br>
Time : {{CurrentDate | date: 'hh:mm:ss a'}} </br>
Time_1 : {{CurrentDate | date: 'HH:mm:ss Z'}} </br>
</div>
</body>
</html>
Output:
Date : 13/12/2017
Date_1 : 13, December 2017
Time : 10:33:42 AM
Time_1 : 10:33:42 +0530
I am using AngularJS to get data from an ASP.NET server application and display it on the client side. Here is what I'm getting:
ProjectID │ CreatedOn
══════════╪══════════════════════
13241 │ /Date(1338364250000)/
13411 │ /Date(1338370907000)/
As you can see, the date is not being displayed correctly. I want to format the date as YYYY-MM-DD HH:MM:SS. How can I do this?
The HTML view:
<div ng-app ng-controller="FirstCtrl">
<table>
<thead>
<tr>
<td>
ProjectID
</td>
<td>
CreatedOn
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="team in teams" class="thumbnail">
<td>
{{team.ProjectID}}
</td>
<td>
{{team.CreatedOn}}
</td>
</tr>
</tbody>
</table>
</div>
The action method:
public JsonResult GetUser()
{
return Json(new { data = ProjectService.GetPrefixUsedCount(1).ToArray() });
}
The JSON result returned:
{"data":[{"ProjectID":13241,"CreatedOn":"\/Date(1338364250000)\/"},
{"ProjectID":13411,"CreatedOn":"\/Date(1338370907000)\/"}]
The quick fix
If changing the format in MVC isn't an option, you can do this:
{{ team.CreatedOn.slice(6, -2) | date: 'yyyy-MM-dd HH:mm:ss' }}
The key bit is .slice(6, -2)—it trims off all the extra junk leaving you with just the epoch time.
Want a filter?
If you use this a lot, you may prefer a custom filter. This one wraps the existing date filter:
.filter('mvcDate', ['$filter', $filter =>
(date, format, timezone) =>
date && $filter('date')(date.slice(6, -2), format, timezone)
]);
Now just replace the date filter with our custom one:
{{ team.CreatedOn | mvcDate: 'yyyy-MM-dd HH:mm:ss' }}
Here's a working example on JSFiddle.
Create custom filter as below:
app.filter("dateFilter", function () {
return function (item) {
if (item != null) {
return new Date(parseInt(item.substr(6)));
}
return "";
};
});
You can then apply the filter in your HTML
<tr ng-repeat="team in teams" class="thumbnail">
<td>{{team.CreatedOn | dateFilter | date:"dd-MM-yyyy"}}</td>
Hope it helps.
You should probably have a look at
http://docs.angularjs.org/api/ng.filter:date
It gives you all the necessary tools to modify and display Date in the format you want.
EDIT :
Could you modify your server to not send the date as Date(****) but just the **** is fine... If you send the date as Date(****), then you are left with 2 options both of which arent good.
TO eval the Date. NO eval.. its not good for your health.
Strip out the Date using a combination of regex.. Again, its possible.. but not recommended.
why send it in and strip it out? Why not just take it out of the server side itself?
In your ASP.NET MVC domain model have an extra property that renders the format expected by angular.
public string CreatedOnJson
{
get
{
return JsonConvert.SerializeObject(CreatedOn, new JavaScriptDateTimeConverter()).Replace("new Date(","").Replace(")","");
}
}
That way you can the use the angular date filter do display in way you prefer:
{{team.CreatedOn | date:'yyyy-MM' }}