The following code is inside return of render function
this.props.investment.selectedInvestor.rounds.map((item,index)=>{
if(item.type.toLowerCase()==this.state.securityType.toLowerCase())
{
return(
<tr onClick={()=>this.showRoundDetails(true,item)}>
<td>
<strong>{item.round_name}</strong><br/>
<span>{item.close_date}</span>
</td>
<td>{item.security_type}</td>
<td>{item.sharing_plan}</td>
<td>{item.investments[0].status}</td>
<td>{item.rate}</td>
<td>{item.frequency}</td>
<td>{item.investments[0].current_amount}</td>
</tr>
)
}
}
I want to convert {item.close_date} to another format i.e use this function toLocaleDateString()
I tried declaring another variable outside return and then convert the date but still could not solve it
{item.close_date} is a string (that contains the date) as you mentioned in comment, to use toLocaleDateString() method first you need to convert that string into date object by using new Date(), after that you can use any date method on that.
Use this:
<span>{ (new Date(item.close_date)).toLocaleDateString() }</span>
Using JavaScript date method:
<span>{ (new Date(item.close_date)).toLocaleDateString() }</span>
var d = new Date("2017-05-10T11:01:50.569Z");
console.log(d.getDay(), d.getMonth(), d.toLocaleDateString())
Using MomentJS library
<span>
{
moment("2017-05-10T11:01:50.569Z", "YYYY-MM-DDThh:mm:ss.SSS").format("hh:mm a")
}
</span>
var d = moment("2017-05-10T11:01:50.569Z", "YYYY-MM-DDThh:mm:ss.SSS")
console.log(d.format("hh:mm a"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
I prefer momentjs because I can parse and get date in any format.
Related
I have a translate directive that takes a key and provides the text in the current locale which could be any language.
So for example you can do either:
<p translate="yes">#App.MyString</p>
or
<p>{{'#App.MyString' | translate }}</p>
And it will print in the language of the selected culture.
<p> This is my string </p>
The filter in place to handle translations is:
export class TranslateFilter {
public static build(getTextCatalog: Infrastructure.IGettextCatalog) {
var filter = (resourceKey, resourceType, resourcePrefix) => {
if (resourcePrefix != null) {
resourceKey = `${resourcePrefix}.${resourceKey}`;
}
return getTextCatalog.getString(`#${resourceType}.${resourceKey}`);
};
return filter;
}
}
I want to now also try to combine this with string.Format.
So if the #App.KeyString contains a string like this: 'Hi {0}. Welcome to {1}' I can do a string.Format using dynamic values.
I can do that within the controller but I was wondering if there's a way it could be done on the html file.
For example something like this:
<p translate="yes" format="{{scope.name}},{{scope.place}}">#App.MyString</p>
or
<p>{{'#App.MyString' | translate | format:[$scope.name, $scope.place] }}</p>
would print
'Hi Nick! Welcome to Narnia'
Any ideas?
I have a JSON which provides me a user's working experiences info. But country and city's are provided in a code format (TR,DE etc.)
I am using ng-repeat to pass them into html like this
<div ng-repeat="e in experiences">
<span>{{e.Name}}</span>
<span ng-init="changeCodeToFullName(e.Country)">{{vm.CountryFullName[$index]}}</span>
</div>
I am using ng-init to convert Country Code to full name. changeCodeToFullName is an angular service written by me, Is this a correct method? If it is, I can't access the dom to change CountryFullName value. I tried to access them in JS file like vm.CountryFullName[0]="TEST" but it didn't worked. I need to use e.Country variable after, therefore I can't change the original .e.Country value.
How can I access a variable inside of ng-repeat after ng-repeat completed?
How about using a custom filter:
<div ng-repeat="e in experiences">
<span>{{e.Name}}</span>
<span>{{e.Country | changeCodeToFullName}}</span>
</div>
angular.module('App').filter('changeCodeToFullName', function(YourService) {
return function(country) {
return YourService.getFullCountryName(country)
}
})
Here's an example: http://codepen.io/rustydev/pen/YWyqJB
This is one way of doing it - but this ngInit value won't be reparsed if the list updates. Why not just format the data in the JSON request response - such as:
$http.get("json.json").success(function(data) {
$scope.exeriences = data.map(function(obj) {
//Format results;
if (obj.Country == "DE") {
obj.Country = "Germany"; //etc
}
return obj;
});
});
<div ng-repeat="n in ShoeDetails.txnList">
<div ng-if="n.statusNo == 21">
<p ng-bind="n.timeStamp | date:'MM/dd/yyyy'"></p>
</div>
</div>
i'm trying to update the date format using angularjs,but i'm getting a result like this /Date(1459418939990+0530)/,unable to understand what was this,any help appreciated
Those are ticks. You need to parse and convert it to a date object.
Either do the below in the frontend using javascript, or do it in C#.
var myDate = "/Date(1459418939990+0530)/";
var regex = /-?\d+/;
var match = regex.exec(myDate);
var date = new Date(parseInt(match[0]));
I've got a date coming in from an API that returns the date like this: 2012-10-12 00:00:00
I'm printing it to my page like this:
<span class="year" ng-bind-html="hit._highlightResult.original_release_date.value"></span>
with original_release_date.value being that date (2012-10-12 00:00:00). Does anyone know a quick and easy way to just return the year?
Any help is appreciated. Thanks in advance!
you can use the date api in angularjs
<span class="year"> {{ hit._highlightResult.original_release_date.value | date:"yyyy" }} </span>
hit._highlightResult.original_release_date.value should be a (according to doc)
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
so create javascript date object and format it to show only the year,
step 1 - create a filter to get a date object from a string (2012-10-12 00:00:00)
app.filter('dateToISO', function() {
return function(input) {
var dateTime = input.split(" ");
var date = dateTime[0];
var datePartials = date.split("-");
var time = dateTime[1];
var timePartials = time.split(":");
var formattedDate = new Date();
formattedDate.setFullYear(datePartials[0]);
formattedDate.setMonth(datePartials[1]-1);
formattedDate.setDate(datePartials[2]);
formattedDate.setHours(timePartials[0]);
formattedDate.setMinutes(timePartials[1]);
return formattedDate;
};
});
step 2 - create a controller function to get the date object
$scope.getDate = function() {
return $filter('dateToISO')('2012-10-12 00:00:00');
};
step 3 - call that function and get the date object to format in the HTML
<span class="year"> {{ getDate() | date:"yyyy" }} </span>
here is the working Demo Plunker
This may be a bit off and cheating but I think '2012-10-12 00:00:00'.split('-')[0] will do the trick
I have a service that returns json like so:
"Results":[{"Id":"1","SomeDate":"2/19/2013 10:34:04 PM"}
When i try to format using binding, it doesnt work - it just displays the string above:
{{values.SomeDate| date:'mediumTime' }}
However, it works if i just pass in this format:
{{ '1997-03-01T00:00:00+01:00' | date:'mediumTime'}}
What is the best way to fix this?
As mentioned in the comments by charlietfl, a clean option would be to update the service to return a date format already compatible with the built-in angular filters.
However, if this is not possible, you could set up a custom filter to parse your dates.
A (very small) library that I recommend is Moment.js:
http://momentjs.com/
The following is an example blog post on how to wrap Moment.js in a custom angular filter:
http://www.34m0.com/2012/07/angularjs-user-friendly-date-display.html
angular.module('myModule').
filter('fromNow', function() {
return function(dateString) {
return moment(new Date(dateString)).fromNow()
};
});
This would be used like:
{{ reply.createdDate | fromNow }}
You can place this in your controller:
$scope.toJsDate = function(str){
if(!str)return null;
return new Date(str);
}
and then:
{{toJsDate(values.SomeDate)| date:'mediumTime' }}
I would second #AlexOsborn's suggestion to use moment.js to create a custom filter because moment.js can parse the string containing the date. In my implementation of the filter, I also delegate date formatting to moment.js because I feel moment.js' date formatting feature is more comprehensive than angular.js':
angular
.module("YourModuleNameHere")
.filter("formatdate", [function () {
var result = function (date, formatstring) {
if(formatstring === null) {
formatstring = "DD MMM YYYY";
}
return moment(date).format(formatstring);
}
return result;
}]);
And you use it just like you'd use angular.js date filter (but to format the date you'd use moment.js formatting codes):
<p>Today is {{moment() | formatdate}}</p>
<p>Another date: {{values.SomeDate | formatdate:"ddd D MMM YYYY"}}</p>