Question

我在PrimeNg Datatable中排序/过滤日期列时遇到问题。我正在显示日期＆＃34; dd / mm / yyyy＆＃34; string。

如果使用模板显示＆＃34; dd / mm / yyyy＆＃34;然后过滤器不能用作处理日期ISO格式的实际数据绑定的过滤器。
如果从后端将数据转换为字符串格式，则排序不正确，因为它在字符串而不是日期排序。

Answer 1

我使用moment.js解决了这个问题，因为它更容易，更快，但是如果你想在没有任何框架的情况下做到这一点，总是可以自定义代码（我希望在条件和字符串转换时可以多做几个）

所以你必须将moment.js添加到你的项目中： a）通过将src链接添加到您的主html索引文件（主角选择器，polyfills等），来自此站点https://cdnjs.com/libraries/moment.js/ b）但如果是生产我建议通过npm添加它。 http://momentjs.com/docs/这里有其他可能性。

然后，您必须在import语句和@Component注释

上声明时刻变量

declare var moment;

然后如果你已经将primeng模块添加到你的项目中，在primeng的p-dataTable标签内的html文件中有p-column标签，在这个标签中我们需要添加sortable =“custom”和（sortFunction）= “mysort（$ event）”就像这样：

<p-column field="date" header="Data" sortable="custom" (sortFunction)="mysort($event)"></p-column>

用p-column标签显示的日期是DD.MM.YYYY字符串格式，例如：03.01.2017

之后在我们正在获取并将数据推送到数组的组件中，用于在表中显示数据，在我的名为约会的示例中，我们需要添加名为mysort的函数（因为我们在html中调用此函数p-列标签）

mysort(event) {
    let comparer = function (a, b): number {
      let formatedA = moment(a.date, "DD.MM.YYYY").format('YYYY-MM-DD');
      let formatedB = moment(b.date, "DD.MM.YYYY").format('YYYY-MM-DD');
      let result: number = -1;

      if (moment(formatedB).isBefore(formatedA, 'day')) result = 1;
      return result * event.order;
    };

    this.appointments.sort(comparer);
}

在我的例子中，a.date和b.date是一个像“21.12.2016”这样的字符串，我们需要格式化为YYYY-MM-DD。然后我们只是比较日期。

就这样，我检查了这段代码并且它有效。我希望它会帮助某人，如果解释是用教程风格写的，请原谅我，但这是我的第一个答案，我想以正确的方式做到这一点：）

Answer 2

我和Relis一样解决了它。然而，在我重新分配＆＃34; this.appointments＆＃34;之前，它没有工作。变量

  mysort(event) {

     this.appointments.sort((appointmentA, appointmentB) => {

     // Here the property date is a date string with the format 'dd/mm/yyyy'. 
     // In the constructor of moment(), the second paramater is 
     // the format of the string you're passing in.
     const momentA = moment(appointmentA.date, 'dd/mm/yyyy');
     const momentB = moment(appointmentB.date, 'dd/mm/yyyy');

     if(momentB.isBefore(momentA)){
       result = 1;
     }

     return result * event.order;
   });

    // This is the key here.
    this.appointments = [...this.appointments];
    }

Answer 3

首先感谢@Relis提供了有用的答案，尽管我已经用它来解决一个不同的问题。关于这个问题，我相信这可以在没有任何额外功能和回调的情况下解决，这些功能和回调会强制您在每次单击标题时转换日期。您只需要将模型和表示分开（用于排序和表示的模型以在数据表中显示数据）想象一下，我们有一个具有日期属性的对象数组：

let dataArray = [{date:'01/02/2016'},{date:'01/02/2017'}]

然后，您可以使用其他属性sortableDate扩展此数组中的每个对象：

 let dataArray = [{date:'01.02.2016', sortableDate:'2016-02-01'},{date:'01.02.2017', sortableDate:'2017-02-01'}]

对于转换，我还建议使用moment.js。现在，您可以使用其中一个属性来显示值，使用另一个属性进行排序：

<p-column [field]="'mySortableDate'" [header]="'Header name' [sortable]="true">
  <ng-template let-col let-data="rowData" pTemplate="body">
    <span>{{data.date}}</span>
  </ng-template>
</p-column>

Answer 4

简单捣蛋

＆＃13;

<p-column field="StartDate" [editable]="true" header="Start Date">
<ng-template let-col let-car="rowData" pTemplate="body">
 <span>{{car[col.field] | date: '  d,MMM,yyyy'}}</span>
</ng-template>                         
 </p-column>

＆＃13;

PrimeNG DataTable自定义排序或过滤（Angular 2）

4 个答案: