Develop Reference

AngularJS - Converting timestamp date format to javascript format

I want to show in a view of an angular project a human friendly date format, and I saw that angular has a filter to do so, but the input date needs to have a certain format.
The desired output format to be seen in the view is the following: "dd/MMMM/yyyy hh:mm:ss"
Currently, I have on a Database the following timestamp format:
"2016-08-15 12:34:34"
How can I format this type of timestamp so that angular can intepret it and format it as desired?
Thanks a lot!

You can parse the date to a javascript date and then use the date filter in Angular to show it in the format you want (if you can't use the date filter on the date from your database directly).
You could do this as a filter to make it easier:
myApp.filter('formatted', function() {
return function(value) {
return new Date(value);
}
});
In your html you could then add this filter before the date filter:
Filter: {{ vm.dateToFormat | formatted | date: 'dd/MMMM/yyyy hh:mm:ss' }}

If Angular is having trouble parsing the string from the database on its own you could just use JavaScript Date.parse("2016-08-15 12:34:34") to return you a date that Angular will interpret properly.

You could just use the inline filter:
Example:
<span>{{vm.Date | date: 'dd/MMMM/yyyy hh:mm:ss'}}</span>
EDIT: To be clear, you post doesn't clarify if that timestamp is a string or not, so you may have to parse it accordingly. I see the other posters just assumed it was a string.

EXTJS Ext.util.Format.date Automatic date conversion

I have a date field which contains data coming in from the database as 2015/07/31 13:01:53.180z.
Datetime is stored in UTC on database.
My code looks like this:
var startDateTime = Ext.util.Format.date(StartDateTime, 'm/d/y g:i:s A');
But the output I get is the conversion of UTC to IST(Indian).I checked on Chrome,Mozilla and IE.
I got same output all the time
Does ExtJs does this? Because I haven't wrriten any method for conversion.
I use ExtJs 4.1.1
I would appreciate any help on this.

Timezone is appended in the string->JS Date conversion.
To parse the date from database without timezone conversion you should use the Ext.Date.parse explicitly, not automatically through model field type 'date' or simply JS constructor new Date().
For example:
var db_date = '2015/07/31 13:01:53.180z',
js_date = Ext.Date.parse(db_date.substring(0,db_date.length-5), 'Y/m/d H:i:s'),
date_to_show = Ext.util.Format.date(js_date, 'm/d/y g:i:s A');
Obviously "substring" must be replaced by something better, for example you could format db date (cutting timezone part) in the web service serialization.
If you achieve to clean the date string in the web service you can also add "dateFormat" attribute to model fields to parse date correctly into models.

Is there a way to use angularjs 'date' filter without the the local timezone?

I need to show date in the same timezone as it coming in from service. But angular date filter converts the date to local timezone. is there a way to avoid conversion in local timezone.
My input is 2014-12-11T05:21:22.323-05:00
required output - 12/11/2014 05:21:22 PM (without converting to local timezone)
Thanks in advance.

You can create a custom filter for this, just convert the desired date without the timezone, for example:
myApp.filter('ignoreTimeZone', function(){
return function(val) {
var newDate = new Date(val.replace('T', ' ').slice(0, -6));
return newDate;
};
});
Check this fiddle:
http://jsfiddle.net/ghxd6nom/
You can also use a library for this, like moment.js

Angular provides service '$filter'. We can inject this service on controller.
with the help of this service, we can format the date .
var dateFrom = $filter('date')(new Date(), "MM/dd/yyyy");
in this way, we can able to format the date with or without Timezone.
The return valus is string and we can convert the string into DateTime on Backend.
The otherway is to use library moment.js.
This library provides better way of converting/formatting Dates.
check this blog , which provides angular date/time filtering & formatting.

You can use this :
$filter('date')(date, format, '+0000')
Documentation: https://docs.angularjs.org/api/ng/filter/date

How to send AngularStrap datepicker value without timezone?

I'm wondering if it's possible to use AngularStrap's datepicker without it keeping the user's locale's timezone information. In our application we want to handle Contract objects that have an expiration date.
When adding or editing the contract object, there is a datepicker field for selecting the date. The following thing happens:
The user selects the date (e.g. 2013-10-24)
Angular binds the javascript date object to the ng-model field
The binded date object is in the user's timezone (e.g. GMT+3)
The user submits the form
The date gets sent to the server using Angular's $http service
In step 5 the date is converted to UTC format. The selected date was GMT+3 2013-10-24 at midnight, but the UTC conversion changes the date to 2013-10-23 at 9pm.
How could we prevent the conversion, or use UTC dates during the whole process? We don't want the contract's date to change based on the user's local timezone. Instead, we want the date to be always 2013-10-24, no matter what timezone.
Our current solution was to make small changes to the AngularStrap library so that the date won't change when sent to the server.
If we could get the user's selected timezone in the server, we could make another conversion there, but the server doesn't have that information.
All ideas are appreciated!

The issue isn't AngularStrap. Its just how javascript dates work and how JSON formats them for transmission. When you turn a javascript date object into a JSON string, it formats the string as UTC.
For example, I'm in Utah and it is now 07:41 on 2013-10-24. If I create a new javascript date and print it to the console it will say:
Thu Oct 24 2013 07:41:19 GMT-0600 (MDT)
If I stringify that same date (using JSON.stringify(date), I get:
"2013-10-24T13:41:47.656Z"
which you can see is not in my current timezone, but is in UTC. So the conversion is happening just before the form gets sent to the server when it gets converted from a javascript object to a JSON string.
The easiest way to do it would be to just change the date to a string of your own choosing prior to sending the date to the server. So instead of letting JSON change the date to UTC, (assuming you don't care about the time of day) you could just do something like this:
var dateStrToSend = $scope.date.getUTCFullYear() + '-' + ($scope.date.getUTCMonth() + 1) + '-' + $scope.date.getUTCDate();
That will give you a UTC-based string that looks like '2013-10-24' and then you can send that to the server, instead of the JSON format which includes the time info. Hopefully that helps.
UPDATE: As #Matt Johnson said, there are two ways to do it. You said: How could we prevent the conversion, or use UTC dates during the whole process?. If you want to use UTC, then use my above explanation. If you want to just "prevent the conversion", you could use the following:
var dateStrToSend = $scope.date.getFullYear() + '-' + ($scope.date.getMonth() + 1) + '-' + $scope.date.getDate();

A bit late but I spent my afternoon on this and someone might find it useful.
Another way to do this declaratively is to use the dateType, dateFormat and modelDateFormat attributes. Set these in either the config or the HTML e.g
angular.module('app').config(function ($datepickerProvider) {
angular.extend($datepickerProvider.defaults, {
dateFormat: 'dd-MMMM-yyyy',
modelDateFormat: "yyyy-MM-ddTHH:mm:ss",
dateType: "string"
});
});
DateFormat is the format the date will be displayed to the user in the date picker while modelDateFormat is the format it will be converted to before being bound to your model.
I also had default values coming from the server which I needed to be bound to the datepicker on page load. I therefore had to update the format the server serialized dates in JSON to match the modelDateFormat. I am using Web API so I used the below.
var jsonSettings = Formatters.JsonFormatter.SerializerSettings;
jsonSettings.DateFormatString = "yyyy-MM-ddTHH:mm:ss";

The "Angular way" is to use the $filter service to format the date returned by the datepicker.
Example (HTML):
{{inpDate | date: 'dd-MM-yyyy'}}
Example (JS):
$scope.processDate = function(dt) {
return $filter('date')(dt, 'dd-MM-yyyy');
}
Plunker here

How to change the date format in JavaScript?

I am using one jquery date picker,
with using picker i am getting date in like this format
Friday, May 21, 2010
Now i want to add one day in this date so i think, i can only do if i change the date in exact format like
21/5/2010
I want to only convert that bcz i want to add one day to the particular date.
So what do u suggest me? How can I do that?
Can i do without converting it ?
thanks in advance....

Take a look at http://docs.jquery.com/UI/Datepicker#option-dateFormat

datejs may be useful to you.

In addition to the formatting options given by others, you should add using date objects rather than to the string representation of the date object.
I.E.
// add 5 days to today
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

I think you need to detail what jQuery plugin do you use.
Is it this one? http://jqueryui.com/demos/datepicker/
If so, then when you cann getDate method, you'll get Date object representing a date. You can easily manipulate it.

The date format has nothing to do with how dates are stored; it only affects the way dates are displayed. JavaScript has a native Date object and jQuery UI's Datepicker allows to access such object:
http://jqueryui.com/demos/datepicker/#method-getDate
Once you have a Date object, you can alter it to suit your needs:
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Date
Finally, you can feed it back into Datepicker:
http://jqueryui.com/demos/datepicker/#method-setDate