I'm using the
date pipe to format my date, but I just can't get the exact format I want without a workaround. Am I understanding pipes wrongly or is just not possible?
Alexander Abakumov
5,39255 gold badges5050 silver badges7575 bronze badges
Jp_Jp_
1,78444 gold badges1717 silver badges2727 bronze badges
12 Answers
Pipe date format bug fixed in Angular 2.0.0-rc.2, this Pull Request.
Now we can do the conventional way:
Current Version:
Old Versions:
Fernando LealFernando Leal
4,66133 gold badges1919 silver badges3939 bronze badges
Import DatePipe from angular/common and then use the below code:
where userdate will be your date string.See if this helps.
Make note of the lowercase for date and year :
EDIT
You have to pass
locale string as an argument to DatePipe, in latest angular. I have tested in angular 4.x
For Example:
HILARUDEEN ALLAUDEEN
1,45011 gold badge1515 silver badges2626 bronze badges
PrashanthPrashanth
78511 gold badge88 silver badges1111 bronze badges
You can achieve this using by a simple custom pipe.
Advantage of using a custom pipe is that, if you want to update the date format in future, you can go and update your custom pipe and it will reflect every where.
PrashobhPrashobh
5,2771313 gold badges4242 silver badges8282 bronze badges
I always use Moment.js when I need to use dates for any reason.
Try this:
And in the view:
Asqan
2,11377 gold badges3838 silver badges7373 bronze badges
Oriana RuizOriana Ruiz
Amir
6,86844 gold badges3838 silver badges4545 bronze badges
DeepakDeepak
76722 gold badges66 silver badges2121 bronze badges
The only thing that worked for me was inspired from here:https://stackoverflow.com/a/35527407/2310544
For pure dd/MM/yyyy, this worked for me, with angular 2 beta 16:
Community♦
Johan ChouquetJohan Chouquet
Angular Date Filter
I think that it's because the locale is hardcoded into the
DatePipe . See this link:
And there is no way to update this locale by configuration right now.
Thierry TemplierThierry Templier
154k2929 gold badges335335 silver badges307307 bronze badges
If anyone looking with time and timezone, this is for you
add z for time zone at the end of date and time format
ULLAS KULLAS K
32922 gold badges44 silver badges1717 bronze badges
Date pipes does not behave correctly in Angular 2 with Typescript for Safari browser on MacOS and iOS. I faced this issue recently. I had to use moment js here for resolving the issue. Mentioning what I have done in short..
{{ convertDateToString(objectName.startDateTime) }}
import * as moment from 'moment';
NikhilNikhil
If anyone can looking to display date with time in AM or PM in angular 6 then this is for you.
Output
Pre-defined format options
Examples are given in en-US locale.
Ahmer Ali AhsanAhmer Ali Ahsan
1,54888 gold badges2222 silver badges4242 bronze badges
You can also use momentjs for this sort of things. Momentjs is best at parse, validate, manipulate, and display dates in JavaScript.
I used this pipe from Urish, which works fine for me:
In the args parameter you can put your date format like: 'dd/mm/yyyy'
DoekDoek
You can find more information about the date pipe here, such as formats.
If you want to use it in your component, you can simply do
Now, you can simply use its transform method, which will be
YushinYushin
protected by Community♦Apr 8 '17 at 4:57
Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead? Not the answer you're looking for? Browse other questions tagged dateangularangular-pipedate-pipe or ask your own question.
Eminem's latest album name. I have a complex structured json data that needs to be apply an advanced filtering in my Angular 6 App.
JSON Data:Filter Options:
I would like to have 3 drop-down list in HTML page to filter by:
HTML View:
The UI View will look like the below:
Wanted Result:
When I select
ProgramCategory = 'HR' and ProgramStatus = 'Part Time' , there will be only 2 students (student1 ,student2 ) returned. I spend days try to get the result that I want, but still not solve. I use this article as ref and made some improvement based on my data, but the returned data is incorrect, see the image below: So, I only need the marked rows (row#:1,2 ) to be returned.
The the marked row#:5 is marked by mistake in the image above.
My ts code:My HTML Code:Help:
Could anyone help me to achieve my goal?
You can change my current ts code or have a new solution, both are welcomed!
Thanks a lot!
Lester
LesterLester
4 Answers
I've got a solution for you here using reactive forms and rxjs BehaviorSubjects:
That link has your full solution, but here's the core of the filtering issue I think you had:
Filtering for both ProgramCategory and ProgramStatus (where both have to match for the same Program) is a fundamentally different filter than filtering for either separately.
Since you what you want with your two program filters is essentially 'only show students who have at least 1 Program that matches all existing filters', you can see in my stack blitz that I group the relevant controls into a
FormGroup and write filters that reflect this intended behavior.
If you're up for it, I'd recommend adjusting your table to using
@angular/cdk/table , I'm actually working on an article on that topic now with the guy from Angular Firebase (like in the link you posted). I think that'd be well-worth the effort, especially if you like this more rxjs-centric approach I used in this solution.
ZackDeRoseZackDeRose
Set your filters and then call the following method with the appropriate values.
VtoCorleoneVtoCorleone
9,43744 gold badges2828 silver badges4444 bronze badges
Because the key of this.filters[property] is always Programs, you're always overwriting the previous selection. For that reason it will only ever apply the latest of the 2 sub-filters.
Instead, you should check if a filter is already defined for
this.filters[property] . If it is, make sure it is also checked.
You can modify your user184994user184994
filterMatchSub like so:
12.1k11 gold badge1919 silver badges3030 bronze badges
Here is my full take on how this should be handled. Full working exmaple on stackblitz.
Module:
Component:
HTML:
bodorgergelybodorgergely
Not the answer you're looking for? Browse other questions tagged jsonangulartypescript or ask your own question.
I have an UTC date in milliseconds which I am passing to Angular's date filter for human formatting.
Awesome, except
someDate is in UTC and the date filter considers it to be in local time.
How can I tell Angular that
someDate is UTC?
Thank you.
Francisc
FranciscFrancisc
37.5k5151 gold badges162162 silver badges252252 bronze badges
10 Answers
Similar Question here
I'll repost my response and propose a merge:
Output UTC seems to be the subject of some confusion -- people seem to gravitate toward moment.js.
Borrowing from this answer, you could do something like this (i.e. use a convert function that creates the date with the UTC constructor) without moment.js:
controller
template
here's plunker to play with it
See also this and this.
Also note that with this method, if you use the 'Z' from Angular's date filter, it seems it will still print your local timezone offset.
Community♦
ossekossek
Seems like AngularJS folks are working on it in version 1.3.0.All you need to do is adding
: 'UTC' after the format string. Something like:
As you can see in the docs, you can also play with it here:Plunker example
BTW, I think there is a bug with the Z parameter, since it still show local timezone even with 'UTC'.
Maroun
76.1k1919 gold badges150150 silver badges207207 bronze badges
nirnir
2,27511 gold badge1515 silver badges1717 bronze badges
Here is a filter that will take a date string OR javascript Date() object. It uses Moment.js and can apply any Moment.js transform function, such as the popular 'fromNow'
So..
would display Nov 11, 2014
would display 10 minutes ago
If you need to call multiple moment functions, you can chain them. This converts to UTC and then formats..
Charlie MartinCharlie Martin
6,43833 gold badges2626 silver badges3535 bronze badges
There is a bug filed against this in angular.js repohttps://github.com/angular/angular.js/issues/6546#issuecomment-36721868
Jonathan LauJonathan Lau
If you do use moment.js you would use the moment().utc() function to convert a moment object to UTC. You can also handle a nice format inside the controller instead of the view by using the moment().format() function. For example:
duffcodesterduffcodester
An evolved version of ossek solution
Custom filter is more appropriate, then you can use it anywhere in the project
js file
in template
doublesharp
20.3k44 gold badges4141 silver badges6262 bronze badges
DasunDasun
2,43911 gold badge2020 silver badges3232 bronze badges
After some research I was able to find a good solution for converting UTC to local time, have a a look at the fiddle. Hope it help
user3444999user3444999
Could it work declaring the filter the following way?
Matteo PiazzaMatteo Piazza
1,28755 gold badges2222 silver badges3737 bronze badges
You have also the possibility to write a custom filter for your date, that display it in UTC format. Note that I used MistalisMistalis
toUTCString() .
13.8k1212 gold badges5555 silver badges7878 bronze badges
If you are working in .Net then adding following in web.config inside
will solve your issue:
Muhammad WaqasMuhammad Waqas
Not the answer you're looking for? Browse other questions tagged angularjsdatetimeangularjs-filter or ask your own question.
I have a table that lists data extracted from a json file. I want to filtering the data with dropdown. For example, i would like to list houses with prices between 0-1000 or home location is ' Çekmeköy ' .
I added dropdown and i gave the
ng-model='search' property. Then i tried the filter options in *ngFor='let ihome of homes | filter: search' ( i also tried ng-repeat ) but it didn't work.
So, How to filter data with dropdown ? Any suggestion ?
Json Data :
HTML Side
Mevlüt SonerMevlüt Soner
3 Answers
You can use a Angular custom pipe for this.
And the in the template where you have the dropdown
Read more about Angular pipeshere.
Filter Date Angular 6 ExamplehalferAngular 6 Install
15.1k77 gold badges6060 silver badges122122 bronze badges
Anuradha GunasekaraAnuradha Gunasekara
2,89111 gold badge1010 silver badges2727 bronze badges
The syntax you showed ng-model and filter are angularjs syntaxes, you need to use SajeetharanSajeetharan
[(ngModel)] with pipe to do the filtering with angular6.
134k3131 gold badges199199 silver badges257257 bronze badges
mittal bhattmittal bhatt
Not the answer you're looking for? Browse other questions tagged angulartypescriptangular6 or ask your own question.Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |