I am using Core+Angular version 4.5.1, and a primeNG p-datatable to show a data set. One column is DateTime type from API, and it is automatically converted to moment.Moment type in service-proxies.ts. I can pipe the data to short-date format, such as: 08/12/2017. However, when I edit it in the datatable, it always initiates as "Sat Aug 12 2017 11:07:45 GMT-0400". How do I initiate the editor as "08/12/2017"?
I tried using p-inputMask as editor, and set mask = "99/99/9999", but the initial value shows wrong, as "12/20/1711".
I tried using p-calendar as editor, but it shows as an empty box without calendar content.
I tried formatting the data before populate to datatable, e.g. dataArray.Map(x=> x.date = moment(x.date).format('MM/dd/yyyy')); It failed because the x.date is moment.Moment type and cannot be assigned to a string type.
What is the practical option in this scenario?
Thanks,
5 Answer(s)
-
0
Hi @fguo,
Do you use primeNg datatable's inline edit feature or are you editing record in a new modal ? If it is primeNg, can you share definition of your table column for date field ?
-
0
I use primeNg datatable's inline edit feature (see below code p-Template="editor"):
<p-column field="startDate" header="Start" [sortable]="true" [editable]="true" [style]="{'width':'120px'}"> <ng-template let-col let-cus="rowData" pTemplate="body"> <span>{{cus[col.field] | date: 'MM/dd/yyyy'}}</span> </ng-template> <ng-template let-col let-cus="rowData" pTemplate="editor"> <p-calendar [(ngModel)]="cus[col.field]" appendTo="body"></p-calendar> </ng-template> </p-column> -
0
Hi @fguo,
It seems like primeNg does not support moment for calendar yet directly. There are several issues but you can check this one <a class="postlink" href="https://github.com/primefaces/primeng/issues/2440">https://github.com/primefaces/primeng/issues/2440</a>.
Have you tried something like this ?
<p-calendar [(ngModel)]="dateValue" dateFormat="dd.mm.yy"></p-calendar> -
0
I've tried your suggestion and all workarounds in the link <a class="postlink" href="https://github.com/primefaces/primeng/issues/2440">https://github.com/primefaces/primeng/issues/2440</a>, but no luck.
I agree with you, "it seems like primeNg does not support moment for calendar yet directly."
I think I have to use Metronic calendar component for now, but I couldn't find its API document on Metronic's web site. Can you provide me a link to it?
Thanks,
-
0
Hi,
We have used this datetimepicker <a class="postlink" href="https://github.com/Eonasdan/bootstrap-datetimepicker">https://github.com/Eonasdan/bootstrap-datetimepicker</a> in AspNet Zero and it supports moment.
You can configure it's locale and format like this:
$('.datetimepicker').datetimepicker({ locale: abp.localization.currentLanguage.name, format: 'L' });
