Convert UTC time to local time in angular - javascript

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.

Related

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

Date format filter is not working angular js

I am new to angular js .
I am trying to give some date format like Nov-24-2016, but its not working at all .
Below is my code.
{{ x.created | date:" MM-d-y" }}
Here I want this format Nov-24-2016
and x.created value = 2016-11-24 08:02:21
Any suggestion?
Thank you
you can create a custom
.filter('datetime', function($filter){
return function(input){
if(input == null){ return ""; }
var _date = $filter('date')(new Date(input),'MM-dd-yyyy');
return _date.toUpperCase();
};
});
{{ x.created | datetime }}
Have a look at the documentation:
https://docs.angularjs.org/api/ng/filter/date
x.created must be either a Date object or a timestring with milliseconds since UTC epoch.
So either create a manual filter for it or parse your datestring to a Date object.
To use date Pipe x.created must be date object or a number (milliseconds since UTC epoch) or an ISO string as per DatePipe
{{ x.created | date: "MMM-d-y" }} renders to Nov-24-2016
Btw: 2016-11-24 08:02:21 seems not to be a valid ISO string, https://www.w3.org/TR/NOTE-datetime. You could check this.
I had similar problem. It's fix after 2 steps, change document encoding to utf-8 without BOM and rewrite manually data of time. Like this - date:
2013-12-02T17:57:28.556094Z

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'}}

Formatting the date and time using angularjs

I have a date format in the following way,
"tranDate": "2015-11-02T18:30:00.000Z"
how do i format the date and time in human readable way.
date: 2015-11-02
time: 18:30:00
the date filter will handle the UTC datetime string as it is.
Since your string contains Zulu time, first convert the string to a date using new Date as follows:
$scope.date = new Date(obj['tranDate'].replace(' ', 'T'))
Then use angular's inbuilt date filters. in the template. Example:
{{date | date: 'd MMM yyyy'}}
IN CONCROLLER
put the following code in controller
$scope.date_test = {"tranDate": new Date()}
IN HTML
date : {{date_test.tranDate | date: 'yyyy-M-dd'}}
time : {{date_test.tranDate | date:"h:mm:ss"}}
This is an exmaple of formating the date and time
http://plnkr.co/edit/nYChVvYOmok4jX16CNae?p=preview

JavaScript DateFormat Conversion

I have a the locale and a date in that locale format stored in a var in JavaScript
I need to convert that locale based date string to another local format
I have
locale : en-GB / en-US / es / ko
date : dd/mm/yyyy / mm/dd/yyyy yyyy.mm.dd
the above mentioned formats are not exact
ijust mean they are different for each
not i want that date to be displayed as "August 01 2013" like this
SO Finally i need a function(fromLocale,ToLocale,dateInFromLocaleFormat) which returns Date in ToLocale format
Can anyone help me on this
Can't you just use the JavaScript function dateFormat and set the format manually when you display the date?
for example: dateFormat("date", "mmmm dd yyyy");
more detailed here http://blog.stevenlevithan.com/archives/date-time-format

Categories

Resources