Develop Reference

Convert UTC time to local time in angular

I want to convert this utc format date to india date and time format in angular
2019-02-18T17:31:19-05:00
I expect in this format DD/MM/YYYY HH:MM(eg: 02/19/2019 04:01 AM). Can anyone please suggest me how to do it..

One way to do it in vanilla JavaScript would be to make use of Date.toLocaleString(), and to convert it to the Indian timezone by setting it as the timeZone property.
new Date('2019-02-18T17:31:19-05:00').toLocaleString("en-US", {timeZone: "Asia/Kolkata"});
console.log(new Date('2019-02-18T17:31:19-05:00').toLocaleString("en-US", {timeZone: "Asia/Kolkata"}));

Formats a date value according to locale rules.
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
Sourxe: https://angular.io/api/common/DatePipe

in ts
import {utc} from 'moment';
utc = utc;
in html
{{ utc("2019-02-18T17:31:19-05:00").local().format("DD/MM/YYYY HH:MM")}}

if you use a locale_id in your module all date pipes should adhere to that locale
https://angular.io/api/core/LOCALE_ID

UTC dates should have 'Z' appended to it. E.g. 2019-02-18T17:31:00Z.
Secondly, convert the date string to a Date object by using Date.parse()
Then use date filter to display the date <span> {{ dateStr | date }}</span>
Check below
JS -
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.dateStr = Date.parse('2019-02-18T17:31:00Z');
});
HTML -
<div ng-controller="MainCtrl">
{{ dateStr | date }}
</div>

If you want you can use a awesome library for date and time related manipulation.
https://momentjs.com/timezone/docs/
In your case you can try out the following
moment.tz('2019-02-18T17:31:19-05:00', 'Asia/Kolkata').format('MM/DD/YYYY HH:mm a');
This will return you the date in the desired format. Let me know if any further explanation is required for this.

How do I convert '2019-02-22T12:11:00Z' to 'DD/MM/YYYY HH:MM:SS' format in angular

I am working on some API clockify API integration. I am getting all time entries from the API. in the response I am getting start & end time of the task in the 2019-02-22T12:11:00Z.
I want to convert above date format in DD/MM/YYYY HH:MM:SS format. I have used date pipe for this {{item.timeInterval.start | date: dd/MM/yyyy, h:mm a z}} but its not working. it displays the same.
How can I achieve this?

Try using parse into Date object like this -
parseIntoDate(date){
return Date.parse(date)
}
<p>{{parseIntoDate(item.timeInterval.start) | date: 'dd/MM/yyyy, h:mm a z'}}</p>
Working Example

Date in my TS file -
myDate = '2019-02-22T12:11:00Z';
in the html
{{myDate | date: 'dd/MM/yyyy HH:MM:SS'}}

You can just convert your string into a Date object when you receive the data from the API. Just use item.timeInterval.start = new Date(item.timeInterval.start)

Your date format is wrong 🤔 any wrong format will not parse as an example YYYY format will return YYYY but yyyy will return the year 2019 check the documentation for the all format option her
{{'2019-02-22T12:11:00Z' | date : "dd/MM/yyy HH:mm:ss"}}
<br>
{{'2019-02-22T12:11:00Z' | date : "short"}}
<br>
{{'2019-02-22T12:11:00Z' | date : "full"}}
<br>
{{'2019-02-22T12:11:00Z' | date : "yyy"}}
stackblitz demo

moment format verbose date as date object

I used materialize datepicker to pick a date in french format. Now I need this date formatted back to a date object so I can use it in my api. Here's how I try to convert the date back to a normal format:
moment("dimanche 30 juillet 2017","dddd D MMMM YYYY").locale('fr').toDate();
But I receive Invalid Date. Is there a way to convert this date back using moment? Or can I somehow hook to materialize component to retrieve a normal date?

You need to set the fr locale before attempting to parse french day/monthnames.
moment.locale('fr');
moment("dimanche 30 juillet 2017","dddd D MMMM YYYY").toDate();

You can parse your input string passing locale parameter, see moment(String, String, String) docs:
As of version 2.0.0, a locale key can be passed as the third parameter to moment() and moment.utc().
Here a working sample:
var m = moment("dimanche 30 juillet 2017", "dddd D MMMM YYYY", 'fr');
console.log(m.toDate());
console.log(m.format());
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
For further info see Changing locale globally and Changing locales locally.

Convert to TimeStamp in AngularJs

I have an api returning timestamp variable. When I print in AngularJs it shows as 1488195848000.But I want that to be displayed as 2017-02-28 14:49:48(In Timestamp format)
How do I convert in controller?

If you want to convert that variable in HTML,
{{variable | date : 'yyyy-MM-dd HH:mm:ss'}}
And in case of JS,
$filter('date')(variable, 'yyyy-MM-dd HH:mm:ss')
Note: In case of JS, do not forget to add $filter as dependency.

You can format date in AngularJS using the pipe operator and the date filter
<span>{{1488195848000| date:'yyyy-MM-dd HH:mm:ss'}}</span>
In the controller you need to make use of filter function to format the date
like
var _date = $filter('date')(_date, 'yyyy-MM-dd HH:mm:ss')

Format date in angularjs

How do I format date like "Tue 01/19/2016" to show as `"Tuesday, January 19"
I tried
$scope.date = "Tue 01/19/2016";
<p>{{date | date:'EEEE/MMMM/d'}}</p>
output
"Tue 01/19/2016"
Is there a way to format it to show as Tuesday, January 19
Update: Got it working.
var date = new Date("Tue 01/19/2016")
{{date | date: 'EEEE, MMMM d'}}
Thanks

You have to make a date object.
$scope.date = new Date("Tue 01/19/2016");
Than you can use the date filter
{{date | date:'EEEE/MMMM/d'}}

The date variable cannot be a string like this. The AngularJS documentation says:
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).
So, one option is to define the $scope.date variable as a Date object like this:
$scope.date = new Date('2016-01-19');
Also, your filter string needs to be changed to output your desired result:
<p>{{ date | date:'EEEE, MMMM d' }}</p>
But, as you see, the date string is not the same as you have, so if you are receiving it string from an external source in your app (e.g. from an API), you'll have to manually convert it to a compatible string format, which can be directly the AngularJS compatible string format (as in the docs), or one of the Date object compatible string options. The Date.parse() method may also help you.

Try this: {{date | date:'EEEE, MMMM, dd'}}