DatePipe formatting not working on date in tableHow to set locale in DatePipe in Angular 2?Invalid argument 'date format' for pipe 'DatePipe'?Format date as dd/MM/yyyy using pipesAngular2 datePipe returning formatted date but with an additional monthNot able to use datepipe with locale formatDatePipe changes the date incorrectlyAngular 4 error formating Date field in ISO format with DatePipeWhy is the format 'HH:mm' not working in this DatePipe?DatePipe is not working correctly in Angular 6Format UTC using datepipe
Do I have an "anti-research" personality?
How to set the font color of quantity objects (Version 11.3 vs version 12)?
Can I get candy for a Pokemon I haven't caught yet?
Counterexample: a pair of linearly ordered sets that are isomorphic to subsets of the other, but not isomorphic between them
Can someone publish a story that happened to you?
Why do computer-science majors learn calculus?
How to creep the reader out with what seems like a normal person?
How can Republicans who favour free markets, consistently express anger when they don't like the outcome of that choice?
Please, smoke with good manners
How can I get precisely a certain cubic cm by changing the following factors?
Illegal assignment from SObject to Contact
What is the difference between `a[bc]d` (brackets) and `ab,cd` (braces)?
Bayesian Nash Equilibria in Battle of Sexes
What is the strongest case that can be made in favour of the UK regaining some control over fishing policy after Brexit?
Unexpected email from Yorkshire Bank
Find the coordinate of two line segments that are perpendicular
Confused by notation of atomic number Z and mass number A on periodic table of elements
Electric guitar: why such heavy pots?
Was it really necessary for the Lunar Module to have 2 stages?
Why are the 2nd/3rd singular forms of present of « potere » irregular?
Subtleties of choosing the sequence of tenses in Russian
Confusion about capacitors
Does a creature that is immune to a condition still make a saving throw?
Why do TACANs not have a symbol for compulsory reporting?
DatePipe formatting not working on date in table
How to set locale in DatePipe in Angular 2?Invalid argument 'date format' for pipe 'DatePipe'?Format date as dd/MM/yyyy using pipesAngular2 datePipe returning formatted date but with an additional monthNot able to use datepipe with locale formatDatePipe changes the date incorrectlyAngular 4 error formating Date field in ISO format with DatePipeWhy is the format 'HH:mm' not working in this DatePipe?DatePipe is not working correctly in Angular 6Format UTC using datepipe
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am developing a simple app in which I want to show some events in a table. Displaying the data works fine, except when I try to format the date, it doesn't show anymore.
I have tried importing the Pipe and PipeTransform from "@angular/core" and the DatePipe from "@angular/common", this didn't change anything. Any kind of formatting, whether its the predefined formats like "fullDate", or custom formatting like "dd.MM.y" will make the date not show up in the table.
These are the td tags in the table body, if I display the date like this without formatting, it shows up fine.
<tr *ngFor="let event of eventList" style="cursor:pointer;">
<td (click)="onSelect(event.id)" style="padding-bottom: 1.3em">event.name</td>
<td (click)="onSelect(event.id)">event.city</td>
<td (click)="onSelect(event.id)">event.startTime</td>
<td (click)="onSelect(event.id)">
<mat-icon *ngIf="event.isConfirmed" style="padding-left: 23px">done</mat-icon>
<mat-icon *ngIf="!event.isConfirmed" style="padding-left: 23px">clear</mat-icon>
</td>
</tr>
This is how I tried formatting the date:
<td (click)="onSelect(event.id)"> date : "dd.MM.y" </td>
I am fairly new to Angular so feel free to point out mistakes.
Am I missing import statements or is the styling of the other td tags messing up the date? Any help is much appreciated!
angular edited Mar 22 at 20:49
nircraft
2,2391729
asked Mar 22 at 19:06
Jobje325Jobje325
86
add a comment |
I am developing a simple app in which I want to show some events in a table. Displaying the data works fine, except when I try to format the date, it doesn't show anymore.
I have tried importing the Pipe and PipeTransform from "@angular/core" and the DatePipe from "@angular/common", this didn't change anything. Any kind of formatting, whether its the predefined formats like "fullDate", or custom formatting like "dd.MM.y" will make the date not show up in the table.
These are the td tags in the table body, if I display the date like this without formatting, it shows up fine.
<tr *ngFor="let event of eventList" style="cursor:pointer;">
<td (click)="onSelect(event.id)" style="padding-bottom: 1.3em">event.name</td>
<td (click)="onSelect(event.id)">event.city</td>
<td (click)="onSelect(event.id)">event.startTime</td>
<td (click)="onSelect(event.id)">
<mat-icon *ngIf="event.isConfirmed" style="padding-left: 23px">done</mat-icon>
<mat-icon *ngIf="!event.isConfirmed" style="padding-left: 23px">clear</mat-icon>
</td>
</tr>
This is how I tried formatting the date:
<td (click)="onSelect(event.id)"> date : "dd.MM.y" </td>
I am fairly new to Angular so feel free to point out mistakes.
Am I missing import statements or is the styling of the other td tags messing up the date? Any help is much appreciated!
angular edited Mar 22 at 20:49
nircraft
2,2391729
asked Mar 22 at 19:06
Jobje325Jobje325
86
you should be able to use it by importing@angular/commonin your component module.
– nircraft
Mar 22 at 19:12
Please also show an example of what a date value specifically looks like in your case.
– Alexander Staroselsky
Mar 23 at 0:02
I am using the ASP.NET Boilerplate framework so the dates are .NET Core DateTime values. When I display the date without formatting it looks like this:Fri Jul 12 2019 11:59:40 GMT+0200
– Jobje325
Mar 23 at 11:14
add a comment |
I am developing a simple app in which I want to show some events in a table. Displaying the data works fine, except when I try to format the date, it doesn't show anymore.
I have tried importing the Pipe and PipeTransform from "@angular/core" and the DatePipe from "@angular/common", this didn't change anything. Any kind of formatting, whether its the predefined formats like "fullDate", or custom formatting like "dd.MM.y" will make the date not show up in the table.
These are the td tags in the table body, if I display the date like this without formatting, it shows up fine.
<tr *ngFor="let event of eventList" style="cursor:pointer;">
<td (click)="onSelect(event.id)" style="padding-bottom: 1.3em">event.name</td>
<td (click)="onSelect(event.id)">event.city</td>
<td (click)="onSelect(event.id)">event.startTime</td>
<td (click)="onSelect(event.id)">
<mat-icon *ngIf="event.isConfirmed" style="padding-left: 23px">done</mat-icon>
<mat-icon *ngIf="!event.isConfirmed" style="padding-left: 23px">clear</mat-icon>
</td>
</tr>
This is how I tried formatting the date:
<td (click)="onSelect(event.id)"> date : "dd.MM.y" </td>
I am fairly new to Angular so feel free to point out mistakes.
Am I missing import statements or is the styling of the other td tags messing up the date? Any help is much appreciated!
angular edited Mar 22 at 20:49
nircraft
2,2391729
asked Mar 22 at 19:06
Jobje325Jobje325
86
I am developing a simple app in which I want to show some events in a table. Displaying the data works fine, except when I try to format the date, it doesn't show anymore.
I have tried importing the Pipe and PipeTransform from "@angular/core" and the DatePipe from "@angular/common", this didn't change anything. Any kind of formatting, whether its the predefined formats like "fullDate", or custom formatting like "dd.MM.y" will make the date not show up in the table.
These are the td tags in the table body, if I display the date like this without formatting, it shows up fine.
<tr *ngFor="let event of eventList" style="cursor:pointer;">
<td (click)="onSelect(event.id)" style="padding-bottom: 1.3em">event.name</td>
<td (click)="onSelect(event.id)">event.city</td>
<td (click)="onSelect(event.id)">event.startTime</td>
<td (click)="onSelect(event.id)">
<mat-icon *ngIf="event.isConfirmed" style="padding-left: 23px">done</mat-icon>
<mat-icon *ngIf="!event.isConfirmed" style="padding-left: 23px">clear</mat-icon>
</td>
</tr>
This is how I tried formatting the date:
<td (click)="onSelect(event.id)"> date : "dd.MM.y" </td>
I am fairly new to Angular so feel free to point out mistakes.
Am I missing import statements or is the styling of the other td tags messing up the date? Any help is much appreciated!
angular angular edited Mar 22 at 20:49
nircraft
2,2391729
asked Mar 22 at 19:06
Jobje325Jobje325
86
edited Mar 22 at 20:49
nircraft
2,2391729
asked Mar 22 at 19:06
Jobje325Jobje325
86
edited Mar 22 at 20:49
nircraft
2,2391729
edited Mar 22 at 20:49
nircraft
2,2391729
edited Mar 22 at 20:49
nircraft
2,2391729
2,2391729
asked Mar 22 at 19:06
Jobje325Jobje325
86
asked Mar 22 at 19:06
Jobje325Jobje325
86
asked Mar 22 at 19:06
Jobje325Jobje325
86
86
you should be able to use it by importing@angular/commonin your component module.
– nircraft
Mar 22 at 19:12
Please also show an example of what a date value specifically looks like in your case.
– Alexander Staroselsky
Mar 23 at 0:02
I am using the ASP.NET Boilerplate framework so the dates are .NET Core DateTime values. When I display the date without formatting it looks like this:Fri Jul 12 2019 11:59:40 GMT+0200
– Jobje325
Mar 23 at 11:14
add a comment |
you should be able to use it by importing@angular/commonin your component module.
– nircraft
Mar 22 at 19:12
Please also show an example of what a date value specifically looks like in your case.
– Alexander Staroselsky
Mar 23 at 0:02
I am using the ASP.NET Boilerplate framework so the dates are .NET Core DateTime values. When I display the date without formatting it looks like this:Fri Jul 12 2019 11:59:40 GMT+0200
– Jobje325
Mar 23 at 11:14
you should be able to use it by importing
@angular/common in your component module.– nircraft
Mar 22 at 19:12
you should be able to use it by importing
@angular/common in your component module.– nircraft
Mar 22 at 19:12
Please also show an example of what a date value specifically looks like in your case.
– Alexander Staroselsky
Mar 23 at 0:02
Please also show an example of what a date value specifically looks like in your case.
– Alexander Staroselsky
Mar 23 at 0:02
I am using the ASP.NET Boilerplate framework so the dates are .NET Core DateTime values. When I display the date without formatting it looks like this:
Fri Jul 12 2019 11:59:40 GMT+0200– Jobje325
Mar 23 at 11:14
I am using the ASP.NET Boilerplate framework so the dates are .NET Core DateTime values. When I display the date without formatting it looks like this:
Fri Jul 12 2019 11:59:40 GMT+0200– Jobje325
Mar 23 at 11:14
add a comment |
2 Answers
2
active
oldest
votes
Do ensure that you have imported CommonModule into the very same module.ts as your component.html that is using the date pipes.
sample.module.ts:
import CommonModule from '@angular/common';
.
.
@NgModule(
imports: [
CommonModule,
],
.
.
)
I have made a demo for you, using the exact same date pipe you have used.
answered Mar 22 at 19:16
wentjunwentjun
3,1381419
Thank you! My app.module.ts does import theCommonModuleso that should not be the problem. I also tried import the CommonModule from@angular/commonin my module.ts, this does not solve the problem however.
– Jobje325
Mar 23 at 11:12
Hmm, I noticed that you mentioned that your date is in this formatFri Jul 12 2019 11:59:40 GMT+0200. Do you wanna try converting it to the JavaScript Date object before running in through the Date Pipe?
– wentjun
Mar 23 at 11:34
add a comment |
I have found the problem, I am using the ASP.NET Boilerplate framework and apparently something is wrong with the localization. When I set the language to English (default) the formatted date shows up fine. I had it set to dutch for testing purposes and I spotted the console error Missing locale data for the locale "nl".' for pipe 'DatePipe' when trying the formatting.
Thanks for all the help anyway!
answered Mar 23 at 12:01
Jobje325Jobje325
86
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55306321%2fdatepipe-formatting-not-working-on-date-in-table%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Do ensure that you have imported CommonModule into the very same module.ts as your component.html that is using the date pipes.
sample.module.ts:
import CommonModule from '@angular/common';
.
.
@NgModule(
imports: [
CommonModule,
],
.
.
)
I have made a demo for you, using the exact same date pipe you have used.
answered Mar 22 at 19:16
wentjunwentjun
3,1381419
Thank you! My app.module.ts does import theCommonModuleso that should not be the problem. I also tried import the CommonModule from@angular/commonin my module.ts, this does not solve the problem however.
– Jobje325
Mar 23 at 11:12
Hmm, I noticed that you mentioned that your date is in this formatFri Jul 12 2019 11:59:40 GMT+0200. Do you wanna try converting it to the JavaScript Date object before running in through the Date Pipe?
– wentjun
Mar 23 at 11:34
add a comment |
Do ensure that you have imported CommonModule into the very same module.ts as your component.html that is using the date pipes.
sample.module.ts:
import CommonModule from '@angular/common';
.
.
@NgModule(
imports: [
CommonModule,
],
.
.
)
I have made a demo for you, using the exact same date pipe you have used.
answered Mar 22 at 19:16
wentjunwentjun
3,1381419
Thank you! My app.module.ts does import theCommonModuleso that should not be the problem. I also tried import the CommonModule from@angular/commonin my module.ts, this does not solve the problem however.
– Jobje325
Mar 23 at 11:12
Hmm, I noticed that you mentioned that your date is in this formatFri Jul 12 2019 11:59:40 GMT+0200. Do you wanna try converting it to the JavaScript Date object before running in through the Date Pipe?
– wentjun
Mar 23 at 11:34
add a comment |
Do ensure that you have imported CommonModule into the very same module.ts as your component.html that is using the date pipes.
sample.module.ts:
import CommonModule from '@angular/common';
.
.
@NgModule(
imports: [
CommonModule,
],
.
.
)
I have made a demo for you, using the exact same date pipe you have used.
answered Mar 22 at 19:16
wentjunwentjun
3,1381419
Do ensure that you have imported CommonModule into the very same module.ts as your component.html that is using the date pipes.
sample.module.ts:
import CommonModule from '@angular/common';
.
.
@NgModule(
imports: [
CommonModule,
],
.
.
)
I have made a demo for you, using the exact same date pipe you have used.
answered Mar 22 at 19:16
wentjunwentjun
3,1381419
answered Mar 22 at 19:16
wentjunwentjun
3,1381419
answered Mar 22 at 19:16
wentjunwentjun
3,1381419
answered Mar 22 at 19:16
wentjunwentjun
3,1381419
3,1381419
Thank you! My app.module.ts does import theCommonModuleso that should not be the problem. I also tried import the CommonModule from@angular/commonin my module.ts, this does not solve the problem however.
– Jobje325
Mar 23 at 11:12
Hmm, I noticed that you mentioned that your date is in this formatFri Jul 12 2019 11:59:40 GMT+0200. Do you wanna try converting it to the JavaScript Date object before running in through the Date Pipe?
– wentjun
Mar 23 at 11:34
add a comment |
Thank you! My app.module.ts does import theCommonModuleso that should not be the problem. I also tried import the CommonModule from@angular/commonin my module.ts, this does not solve the problem however.
– Jobje325
Mar 23 at 11:12
Hmm, I noticed that you mentioned that your date is in this formatFri Jul 12 2019 11:59:40 GMT+0200. Do you wanna try converting it to the JavaScript Date object before running in through the Date Pipe?
– wentjun
Mar 23 at 11:34
Thank you! My app.module.ts does import the
CommonModule so that should not be the problem. I also tried import the CommonModule from @angular/common in my module.ts, this does not solve the problem however.– Jobje325
Mar 23 at 11:12
Thank you! My app.module.ts does import the
CommonModule so that should not be the problem. I also tried import the CommonModule from @angular/common in my module.ts, this does not solve the problem however.– Jobje325
Mar 23 at 11:12
Hmm, I noticed that you mentioned that your date is in this format
Fri Jul 12 2019 11:59:40 GMT+0200. Do you wanna try converting it to the JavaScript Date object before running in through the Date Pipe?– wentjun
Mar 23 at 11:34
Hmm, I noticed that you mentioned that your date is in this format
Fri Jul 12 2019 11:59:40 GMT+0200. Do you wanna try converting it to the JavaScript Date object before running in through the Date Pipe?– wentjun
Mar 23 at 11:34
add a comment |
I have found the problem, I am using the ASP.NET Boilerplate framework and apparently something is wrong with the localization. When I set the language to English (default) the formatted date shows up fine. I had it set to dutch for testing purposes and I spotted the console error Missing locale data for the locale "nl".' for pipe 'DatePipe' when trying the formatting.
Thanks for all the help anyway!
answered Mar 23 at 12:01
Jobje325Jobje325
86
add a comment |
I have found the problem, I am using the ASP.NET Boilerplate framework and apparently something is wrong with the localization. When I set the language to English (default) the formatted date shows up fine. I had it set to dutch for testing purposes and I spotted the console error Missing locale data for the locale "nl".' for pipe 'DatePipe' when trying the formatting.
Thanks for all the help anyway!
answered Mar 23 at 12:01
Jobje325Jobje325
86
add a comment |
I have found the problem, I am using the ASP.NET Boilerplate framework and apparently something is wrong with the localization. When I set the language to English (default) the formatted date shows up fine. I had it set to dutch for testing purposes and I spotted the console error Missing locale data for the locale "nl".' for pipe 'DatePipe' when trying the formatting.
Thanks for all the help anyway!
answered Mar 23 at 12:01
Jobje325Jobje325
86
I have found the problem, I am using the ASP.NET Boilerplate framework and apparently something is wrong with the localization. When I set the language to English (default) the formatted date shows up fine. I had it set to dutch for testing purposes and I spotted the console error Missing locale data for the locale "nl".' for pipe 'DatePipe' when trying the formatting.
Thanks for all the help anyway!
answered Mar 23 at 12:01
Jobje325Jobje325
86
answered Mar 23 at 12:01
Jobje325Jobje325
86
answered Mar 23 at 12:01
Jobje325Jobje325
86
answered Mar 23 at 12:01
Jobje325Jobje325
86
86
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55306321%2fdatepipe-formatting-not-working-on-date-in-table%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you should be able to use it by importing
@angular/commonin your component module.– nircraft
Mar 22 at 19:12
Please also show an example of what a date value specifically looks like in your case.
– Alexander Staroselsky
Mar 23 at 0:02
I am using the ASP.NET Boilerplate framework so the dates are .NET Core DateTime values. When I display the date without formatting it looks like this:
Fri Jul 12 2019 11:59:40 GMT+0200– Jobje325
Mar 23 at 11:14