I am working with angularjs and the angularjs bootstrap ui (http://angular-ui.github.io/bootstrap/).
I want to use the datepicker directive (http://angular-ui.github.io/bootstrap/#/datepicker).
I am getting a string value from a database
2015-07-30 15:10
Angular wants to have a date object as model but I wasnt able to create a date object with that string. the error I get is
Error: [ngModel:datefmt] http://errors.angularjs.org/1.4.3/ngModel/datefmt?p0=2015-07-30
Can anyboy help me create a date object in angular with a string which has this format -> YYYY-MM-DD
more Information:
the string is in my scope
$scope.event.startdate
and I am splitting it in date, hours and minutes.
$scope.startpoint = {
date: $scope.event.startdate.substring(0, 10),
hours: $scope.event.startdate.substring(11, 13),
mins: $scope.event.startdate.substring(14, 16)
};
The database is MongoDB
Thank you
Adrian
You can use use a generic javascript solution. For example, you can use serega386's answer to a similar javascript question:
var st = "26.04.2013";
var pattern = /(\d{2})\.(\d{2})\.(\d{4})/;
var dt = new Date(st.replace(pattern,'$3-$2-$1'));
You can have the below code in your controller
$scope.newDate =new Date($scope.event.startdate);
and below code in your template
{{newDate | date:'yyyy-MM-dd'}}
Ref: AngularJS/javascript converting a date String to date object
If you are getting the date as a single set of numbers like this
1288323623006
you can use the date formatter directly on that.(from angular doc here)
<span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:
<span>{{1288323623006 | date:'medium'}}</span><br>
<span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>:
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br>
Expected result
I hope that solves your problem, let me know if I'm missing something.
Related
i write the following coding to print the current date time
$scope.date = new Date();
and then i print the same using consol.log
console.log($scope.date);
and it is working fine
Tue Jan 24 2017 16:36:06 GMT+0530 (India Standard Time)
but now i want to change the date format and i want to print like
21-12-2016
can anybody help me here?
i used the conversion but i am unable to remember the page or the url of the page right now,
and stuck on this,
before i leave for the home today i thought of solving this issue
In controller you can do
$filter('date')(date, format, timezone)
to change the date format. And in html,
{{ date_expression | date : format : timezone}}
use this.
Like
$scope.formattedDate = $filter('date')($scope.currDate, "dd-MM-yyyy");
to print same on html
{{ currDate | date : "dd-MM-yyyy"}}
https://docs.angularjs.org/api/ng/filter/date
Following formats are supported by angular.
You can do this either in controller or in html page.
$scope.date = new Date();
The first one is :
$scope.date = $filter('date')($scope.date, 'dd-MM-yyyy');
Second one is :
{{date | date:'dd-MM-yyyy'}}
You can use the Angular date filter:
{{date | date: 'dd-MM-yyyy'}}
You can use the in-build js libraries functions i.e getDay(), getHours(), getMinutes(), getMilliseconds(). This functions will return you the corresponding date's individual components values.
e.g
var x = $scope.yourDateModelObj.getHours();
Likewise, you can get the date, month, years values.
return an integer value for hours.
Hope that helps
I am trying to filter the date using angular filter in HTML. But it is not working.
Here is my template code:
{{due_date | date:'MM/dd/yy'}}
The input is: {"due_date" : "2015-10-10 16:00:00.000+0000"}
The expected output is: 10/10/15
What mistake am I doing?
It happens becouse due_date is a String instead of a Date object.
You can "convert" it by doing (maybe you should put this into your controller):
var due_date_parsed = new Date(due_date);
parse your date like :
$scope.date = Date.parse(new Date());
in you code
Date.parse(jobDetails.trs_data.due_date)
if string is also in proper date format like '20140313T00:00:00' then this code will work perfectly fine. In other case you will have to convert/parse the string to date type.
As a response from the json I am getting the UTC timezone. I need to convert it to local time.
<span class="text-muted">{{trans.txnDate}}</span>
Can anyone help on this?
I just had to solve this problem as well with dates coming from .NET Web API in the format 'yyyy-MM-ddTHH:mm:ss' (e.g. 2016-02-23T00:11:31) without the 'Z' suffix to indicate UTC time.
I created this filter that extends the angular date filter and ensures that the timezone suffix is included for UTC time.
UTC to Local Filter:
(function () {
'use strict';
angular
.module('app')
.filter('utcToLocal', utcToLocal);
function utcToLocal($filter) {
return function (utcDateString, format) {
if (!utcDateString) {
return;
}
// append 'Z' to the date string to indicate UTC time if the timezone isn't already specified
if (utcDateString.indexOf('Z') === -1 && utcDateString.indexOf('+') === -1) {
utcDateString += 'Z';
}
return $filter('date')(utcDateString, format);
};
}
})();
Example Usage:
{{product.CreatedDate | utcToLocal:"dd.MM.yyyy"}}
EDIT (2nd Jan 2017): Please refer #Jason's answer, it is better than this one since it uses custom filter to fix the date format - that's the more Angular way of doing it.
My original answer and edits:
You could use the date filter to format the date:
<span class="text-muted">{{trans.txnDate | date:'yyyy-MM-dd HH:mm:ss Z' }}</span>
This will output:
2010-10-29 09:10:23 +0530
(assuming trans.txnDate = 1288323623006;)
See this documentation of date in angularjs.org. It has quite a few examples that are very helpful!
EDIT:
In response to your comment, use the following to get the date as 17 oct 2014:
<span class="text-muted">{{trans.txnDate | date:'dd MMM yyyy' | lowercase }}</span>
Check the documentation link that I mentioned above.
EDIT2:
In response to your other comment, use the following code. The problem is that the string that you are getting is not properly formatted so the Date object is not able to recognise it. I have formatted it in the controller and then passed to the view.
function MyCtrl($scope) {
var dateString = "2014:10:17T18:30:00Z";
dateString = dateString.replace(/:/, '-'); // replaces first ":" character
dateString = dateString.replace(/:/, '-'); // replaces second ":" character
$scope.date = new Date(dateString);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
{{date | date:'dd MMM yyyy' | lowercase }}
</div>
The JS code for replacement can be improved by finding a smarter way to replace the first 2 occurrences of : character.
I had the same issue. AngularJs's date filter doesn't figure out the string is UTC format, but JavaScript Date object does. So I created a simple function in the Controller:
$scope.dateOf = function(utcDateStr) {
return new Date(utcDateStr);
}
And then used something like:
{{ dateOf(trans.txnDate) | date: 'yyyy-MM-dd HH:mm:ss Z' }}
It displays the date/time in the local timezone
I had the same issue. Below Answer
{{trans.txnDate | date:'yyyy-MM-dd HH:mm:ss Z':'+0530' }}
//You can also set '+0000' or another UTX timezome
Actual Date coming from JSON
Need to format it as below .
Effective Date : 2010-08-31 (trim the time stamp)
End Date : 2010-08-31 (trim the time stamp)
Am using the below code for Formatting the date inside Ng-Repeat.
<li ng-repeat="product in data | startFrom:currentPage*pageSize | limitTo:pageSize"
ng-click="getAttributes(product)">
{{product.prod_start_date| date:'MM/dd/yyyy'}}
{{product.prod_end_date| date:'MM/dd/yyyy'}}
</li>
But it doesnt work still displays the same.
Should the Date be passed as new Date as shown in the below jsfiddle Example
http://jsfiddle.net/southerd/xG2t8/
Note sure how to do that inside ng-repeat.?? Kindly help me on this. Thanks in Advance
I created my own filter to address this.
The date filter cant take a string, needs a date object.
.filter('cmdate', [
'$filter', function($filter) {
return function(input, format) {
return $filter('date')(new Date(input), format);
};
}
]);
then you can do:
{{product.prod_start_date| cmdate:'MM/dd/yyyy'}}
I use moment.js for my UI date time handling (there even a nice angular-moment bower package as well)
http://momentjs.com
https://github.com/urish/angular-moment
usage:
<span>{{product.prod_start_date | amDateFormat:'MM/dd/yyyy'}}</span>
It has a bunch of other options as well with relative dates etc.
I have updated the controller that you showed in the fiddle and here is your updated filter
Here I made use of the $filter('date') which is a feature of Angular itself in order to format the date in the desired format.
Here is the controller:
function Scoper($scope,$filter) {
$scope.s = "2012-10-16T17:57:28.556094Z";
var dateObj = new Date($scope.s);
$scope.dateToShow = $filter('date')(dateObj,'yyyy-MM-dd');
console.log($scope.dateToShow);
}
I am using bootstrap-datetimepicker and using ISO8601 datetime format as yyyy-mm-ddThh:ii:ssZ as mentioned in their options section
In my controller, I do
transaction.date = $('.form_datetime input').val();
which sends the data to backend as (console.log)
created_on: "Wed, 08 May 2013 23:18:32 -0000"
and saves in database as
2013-05-08 16:18:32-07
In my template, I do
<td>{{ transaction.created_on | date:'medium'}}</td>
and I see the output on my HTML as
Wed, 08 May 2013 23:18:32 -0000
But as per the Angular doc, it should be for format Oct 28, 2010 8:40:23 PM
What is that I am missing?
I don't understand why no one provided the simple answer of using the correct format in the filter?
{{item.date | date:'yyyy-MM-ddTHH:mm:ssZ'}}
That will format as ISO-8601
For now, I have created a filter
angular.module('customFilters', []).
filter('dateInMillis', function() {
return function(dateString) {
return Date.parse(dateString);
};
});
added as dependency in app.js as
var app = angular.module('myApp', [
'$strap.directives', 'ngCookies', 'categoryServices', 'transactionServices',
'customFilters'
]);
and in HTML used it as
<!-- added dateInMillis to pass to date to filter Angular way -->
<td>{{ transaction.created_on | dateInMillis | date: 'medium'}}</td>
and that presents date on HTML as
May 8, 2013 5:14:36 PM
If you know a better idea, please let me know
In Brazil (and most of Europe, Australia, etc.), we use the default MySQL DATETIME on DB's:
"Y-m-d HH:ii:ss"
But use date() to display it like this:
"d/m/Y HH:ii:ss"
So in order to display that date in angular, "correctly", create a filter:
var app = angular.module(...
// Converts MySQL datetime into readable BR format
/*
Converts 2013-10-18 18:47:15 into 1382122035000 so angular can format date
using brazilian standards
*/
app.filter('brDateFilter', function() {
return function(dateSTR) {
var o = dateSTR.replace(/-/g, "/"); // Replaces hyphens with slashes
return Date.parse(o + " -0000"); // No TZ subtraction on this sample
}
});
Then, on your angular app, just call the filter and format the value for display:
{{ item.datetime_value | brDateFilter | date:"dd/MM/yyyy HH:mm" }}
That covers date format in Brazilian, UK, New Zealand, etc. date format for angular, just subtract the timezone correctly.
Beside all this, just you have change like this,
<td>{{ transaction.created_on | date:'medium'}}</td>
try to wirte it as
<td>{{ transaction.created_on | date:'MMM d, y h:mm:ss a'}}</td>