Using primeng table to display the data as grid.
Using below code to display testdate with date format.I would like to display the format part(YYYY-MM-dd) in second line of column.Please suggest
<p-column field="testdate" header="Test Date (YYYY-MM-dd)" [sortable]="true"
[style]="{'width':'150px'}"></p-column>
Use ng-template for that :
<p-column field="testdate" header="Test Date (YYYY-MM-dd)" [sortable]="true"
[style]="{'width':'150px'}" let-testdate="rowData.testdate">
<ng-template pTemplate="body">
{{testate | date: 'YYYY-MM-dd'}}
</ng-template>
</p-column>
Related
I try to implement a datatable with dynamic column sortable and paginator.
My problem is that sorting doesn't work:
My code:
<p-dataTable [value]="enregistrements" [row]="10" [paginator]="true"
[pageLinks]="3" [rowPerPageOptions]="5,10(20]" scrollable="true" scrollWidth="1200px">
<ng-container *ngFor="let champ of champs; let i = index">
<p-column header="{{champ}}" [sortable]="true" field="{{champ}}">
<ng-template let-enregistrement="rowData" pTemplate type="body">{{enregistrement.champs[i].value}}</ng-template>
<p-column>
</ng-container>
</p-dataTable>
Ideas on what the problem might be?
My code compile and the display is right but when i click on header column to sort it, nothing happens.
I need to use ngIf in a p-column, but I don't how to get value of datatable.
On primefaces I have "var" option in p:dataTable
I need this:
<p-dataTable [value]="objectList" >
<p-column *ngIf="object.property"></p-column>
</p-dataTable>
I am using primeNg library, I don't want to use a for loop inside my angular component to format my date from String to date, is there a way we can directly call component function inside p-column
<p-column field="new Date(createdDate)" [header]="'InputLabel.hold_date_text' | translate"></p-column>
new Date inside p-column doesn't work. is there a way arround
Thanks in advance.
You can't call function in field attribute. If you want, then you could use template like this below way
<p-column field="createdDate" header="Create Date" >
<template let-col let-appdt="rowData" pTemplate="body">
<span>{{new Date(appdt[col.field])}}</span>
</template>
</p-column>
I am using angular bootstrap datepicker. Everythings works fine but when I select any date like 20-march-2015 it showing me 19-march-2015(one day less from selected day).
Here is my code in Plunker
This is a daylight saving issue.
Do you get the same issue with dates in February.
Looking at your example you can see the date is
OutPut: "2015-04-26T23:00:00.000Z"
For today :)
if I select 1st Jan, I get
OutPut: "2015-01-01T00:00:00.000Z"
Change your SPAN to
<span>OutPut: {{formData.dueDate | date : 'dd/MM/yyyy'}}</span>
And your good ( note the | date : 'dd/MM/yyyy' )
Actually you don't need datepicker. Delete datepicker and use type="date".
<input ng-model="formData.dueDate" type="date" id="dueDate" name="dueDate"
class="form-control" ng-click="data.isOpen = true">
Example
We are using Angular-ui bootstrap datepicker as following :
template : '<div class="datepicker"> <input grid-cell-validatable type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cell.value" is-open="opened" min="minDate" ng-disabled="row.readonly" date-input-parser/> <button class="btn btn-mini btn-calendar icon-calendar" ng-click="open()"></button> </div>'
When i select date using calender date cell, it sends date in "dd-MMMM-yyyy" format but If I select date using "Today" button from the footer, it shows the date selection in the UI cell as "dd-MMMM-yyyy" format but in the java class in backend the format is sent as "yyyy-MM-dd HH:mm:ss".
How can I fix this and get "dd-MMMM-yyyy" format everywhere.
When I debug using Firebug, on click of "Today" button the value itself is getting set in "yyyy-MM-dd HH:mm:ss" format though on UI I see "dd-MMMM-yyyy" date in the cell. How do I change this setting and also set the value in "dd-MMMM-yyyy" format?