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'}}
Related
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.
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
I have a date string with this format
2016-08-12T15:22:43.698Z
how can I parse it to obtain a resulting string that looks like
Aug 12, 2016 5:22 PM
Is there libraries/component that could facilitate such operation or shall I do it manually by coping each part of the String?
var date = new moment('2016-08-12T15:22:43.698Z');
console.log(date.format('MMM DD, YYYY h:mm A'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.js"></script>
Use momentjs, and format the moment obj as your requirement.
If the string is in the ISO standard format, which it looks like it is, you can use Date.parse() or new Date() to turn the value into a Date object. With a Date, you can call toString() or toLocaleString() to get the date formatted in local time.
If you are targeting modern JavaScript environments, Intl.DateTimeFormat provides a very complete API for formatting the date in different locales.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
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.
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