date format is giving different result in angularjs - angularjs

<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]));

Related

How to restrict date in angular-datepicker?

I'm not able to restrict max and min date in angular-datepicker angular-datepicker link
<div date-picker="start" min-date="Date string | Expression" max-
date="Date string | Expression"></div>
What will be valid expression to achieve it?
Below is the list of expression I tried.
min-date="2018-03-12 | date : 'yyyy-MM-dd'"
min-date="2018-03-12 | 'yyyy-MM-dd'"
min-date="2018-03-12 | date"
You need to use the angular controller for the specific scenario.
//HTML code
<div date-picker="start" min-date="minDate" max-
date="maxDate"></div>
//Controller code
$scope.minDate = new Date();
$scope.maxDate = new Date(); //as per your expectation

Convert date inside map function of render in ReactJs

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.

Angularjs: how to change the date format

I am getting date in loop from database. The format is like "2015-09-21 18:30:00". But I want to change it as 'dd/MM/yyyy'.
I tried like this
{{obj.added_date | date : 'dd/MM/yyyy'}}
It shows like
2015-09-21 18:30:00 | date : 'dd/MM/yyyy'}}
If I use fulldate is shows me like:
2015-09-21 18:30:00 | date : 'fullDate'}}
for shortDate it shows like this:
2015-09-21 18:30:00 | date : 'shortDate'}}
The date your passing to view is actually a string and hence angular date filter does not recognise it as date object. You need to convert it to date object first.
Also be careful with firefox, it doesn't work for new Date(); if date separator in '-' instead '/'. So I would also suggest below
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope','$filter', function ($scope,$filter) {
var dateStr = '2015-09-21 18:30:00';
$scope.dt = $filter('date')(new Date(dateStr.split('-').join('/')), "d/M/yyyy 'at' h:mm a");
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<bod ng-app="myApp">
<div ng-controller="MyCtrl">
<div>{{dt}}</div>
</div>
</body>
EDIT: I have created a filter which will work for converting string to date object and will work in loop too
var myApp = angular.module('myApp',[]);
myApp.controller("MyCtrl", function ($scope) {
$scope.dt = '2015-09-21 18:30:00';
});
myApp.filter('formatDate', function(dateFilter) {
var formattedDate = '';
return function(dt) {
console.log(new Date(dt.split('-').join('/')));
formattedDate = dateFilter(new Date(dt.split('-').join('/')), 'd/M/yyyy');
return formattedDate;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<bod ng-app="myApp">
<div ng-controller="MyCtrl">
<div>{{dt | formatDate: dt:'d/M/yyyy'}}</div>
</div>
</body>
Hope this helps
The date format that you have specified doesn't match the input specifications provided in the AngularJS documentation. The following is taken from https://docs.angularjs.org/api/ng/filter/date
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.
I would suggest that you convert the date value into milliseconds and then pass it into the filter.
What i have done is before bindind the data in angular JS you can format the data
//Here i am taking the DOB from session and converted the format in dd-MM-yyyy format
string DOB = ((ABC.Models.Student)Session["Student"]).DOB.ToString("dd-MM-yyyy");
//Here i have used a hidden field where i am going to store DOB in ng-Init
<input type="hidden" name="DOB" id="DOB" ng_init = "DOB=' " + "Date of Birth: " + DOB + "'" /><br />
Later can call your ng-bind method for displaying.
<p ng-bind="DOB"></p>

Format Date to Year

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

Format time in Angular

I have a time field coming from the database that is formated like "14:37:39". I need it formated to be like "2:37 PM". I have tried to use the date filter (which formats time as well), but with no luck.
Help!
<span class="time">{{ feeding.time | date: "shortTime" }}</span>
You can build your own filter based on the format you're expecting...
angular.module('foo', [])
.filter('formatTime', function ($filter) {
return function (time) {
var parts = time.split(':');
var date = new Date(0, 0, 0, parts[0], parts[1], parts[2]);
return $filter('date')(date, 'h:mm a');
};
});
{{ '14:37:39' | formatTime }}
Outputs 2:37 PM
Live Demo
I think that your problem is that feeding.time is a string and the date filter is expecting a date.

Resources