Angularjs: how to change the date format - angularjs

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>

Related

Formatting issue in "{{start_time | date:'HH:mm'}}" - getting warning and formatting not working

Getting below warning and I don't see the format being displayed in input.
The specified value "{{start_time | date:'HH:mm'}}" does not conform
to the required format. The format is "HH:mm", "HH:mm:ss" or
"HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is
000-999.
<input type="time" value="{{start_time | date:'HH:mm'}}">
Current output
Expected hh:mm
Looks like you have your date in start_date and are trying to use start_time on the front-end. This should work:
<input type="time" ng-value="start_date | date : 'HH:mm'">
Example: Working Plunker
UPDATE: to allow for updating the model, you should add a filter:
.filter('parseDate', function () {
return function (date) {
if (angular.isDate(date)) return date;
return new Date(Date.parse(date.replace(/:\d{2}[.,]\d{3}Z$/, '')));
};
});
var start_time = "2017-08-29T17:15:16.814Z";
$scope.start_date = $filter('parseDate')(start_time);
Example: Working Plunker

angularjs convert Date to UTC format in controller

I want to convert below date and time to UTC format
"1970-05-11T18:30:00.000+0000"
I am able to do this inside view, but i want to do it in the controller.
{{stmt.tranDate | date:"dd/MM/yyyy": 'UTC'}}
controller
$scope.kycinfo.dob = "1970-05-11T18:30:00.000+0000";
$scope.dob = $filter('date')($scope.kycinfo.dob, "dd/MM/yyyy");
view
<input type="text" id="dateOfBirth" placeholder="Please Select ..." data-ng-model="dob" name="dob" ng-required="true" mobi-date=true />
Pass "UTC" as third parameter to $filter('date).
$scope.kycinfo.dob = "1970-05-11T18:30:00.000+0000";
$scope.dob = $filter('date')($scope.kycinfo.dob, "dd/MM/yyyy", "UTC");
https://docs.angularjs.org/api/ng/filter/date
i think you can try the following code:
var toUTCDate = function(date){
var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
return _utc;
};
you can also visit Using AngularJS date filter with UTC date

How to display local time zone?

I am using datetimepicker.js.
I have the following code:
Partial HTML:
<div ng-hide="editingData[x.date]">{{x.date|date}} </div>
So my date is coming as:
May 21, 2015 2:52:29 PM
Expected:
May 21, 2015 2:52:29 PM IST
So Is there any easy way to add timezone in angularjs ?
I am having moment.js included as well and found that it can manipulate dates well. Can it be helpful ?
Displaying local time zone
may be this will help you :)
<div ng-app ng-controller="MyCtrl">
{{date | date:'MMM dd yyyy - h:mm:ss a '}} {{z}}
</div>
function MyCtrl($scope) {
$scope.date = new Date();
var now = new Date().toString();
$scope.z = now.indexOf('(') > -1 ?
now.match(/\([^\)]+\)/)[0].match(/[A-Z]/g).join('') :
now.match(/[A-Z]{3,4}/)[0];
if ($scope.z == "GMT" && /(GMT\W*\d{4})/.test(now)) {
$scope.z = RegExp.$1;}
}
Working js fiddle

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