簡體   English   中英

ng2-smart-table 中的日期未顯示

[英]date in ng2-smart-table is not displaying

我正在嘗試使用智能表添加和顯示我的數據 angular 10 其中一個表列是我安裝 mydatepicker 的日期 我制作了一個名為calendar的組件

這是calendar.ts

import { Component, Input, OnInit } from '@angular/core';
import { IMyDpOptions, IMyDateModel } from 'mydatepicker';
import { ViewCell } from 'ng2-smart-table';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent {

  public startDateOptions: IMyDpOptions = {
    dateFormat: 'yyyy/mm/dd',
    editableDateField: false,
    openSelectorOnInputClick: true,
    firstDayOfWeek: 'su',
    satHighlight: true,
    selectionTxtFontSize: '13px',
    dayLabels: {
      su: 'أح',
      mo: 'اث',
      tu: 'ث',
      we: 'أر',
      th: 'خ',
      fr: 'ج',
      sa: 'س',
    },
    monthLabels: {
      1: 'جانفي',
      2: 'فيفري',
      3: 'مارس',
      4: 'أفريل',
      5: 'ماي',
      6: 'جوان',
      7: 'جويلية',
      8: 'أوت',
      9: 'سبتمبر',
      10: 'أكتوبر',
      11: 'نوفمبر',
      12: 'ديسمبر',
    },
    height: '26px',
    todayBtnTxt: "اليوم",
    // disableSince: this.getCurrentDate()
  };
  public endDateOptions: IMyDpOptions = this.startDateOptions;


}

@Component({
  template: {{value | date:'short'}} ,
})
export class CalendarRenderComponent implements  ViewCell,OnInit {
  @Input() value: string;
  @Input() rowData: any;

  constructor() { }

  ngOnInit() { }
  

}

這是我在smart-table.ts中的稱呼

import { Component } from '@angular/core';
import { IMyDpOptions, IMyDateModel } from 'mydatepicker';
import { CalendarComponent, CalendarRenderComponent } from './calendar/calendar.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'grp';

  settings = {
    columns: {
      id: {
        title: 'id'
      },
      name: {
        title: 'name'
      },
      username: {
        title: 'username'
      },
      email: {
        title: 'email'
      },
      birthday: {
        title: 'Birthday',
        type: 'custom',
        renderComponent: CalendarRenderComponent,
        width: '250px',
        filter: false,
        sortDirection: 'desc',
        editor: {
          type: 'custom',
          component: CalendarComponent,
        },
      },
    },
    delete: {
      deleteButtonContent: '<i class="fa fa-trash" style="font-size:32px"></i>',
      saveButtonContent: 'save',
      cancelButtonContent: 'cancel',

    },
    add: {
      addButtonContent:'<i class="fa fa-plus" style="background-color: green;"></i>',
      createButtonContent: '<i class="fa fa-check"></i>',
      cancelButtonContent: '<i class="fa fa-times"></i>',
    },
    edit: {
      editButtonContent:'<i class="fa fa-pencil" style="font-size:32px"></i>',
      saveButtonContent:'<i class="fa fa-check"></i>',
      cancelButtonContent: '<i class="fa fa-times"></i>',
    },
  };
  data = [
    {
      id: 1,
      name: "test Graham",
      username: "Bret",
      email: "test@april.com",
      birthday: "2019-08-14T00:00:00"
    },
    {
      id: 2,
      name: "test Howell",
      username: "test",
      email: "test@gmail.tv",
      birthday: "2019-08-14T00:45:51"
    },
    {
      id: 11,
      name: "testDuBuque",
      username: "test.Stanton",
      email: "test@test.biz",
      birthday: "2019-08-14T00:45:51"
    }
  ]; 

  
}

當我單擊“添加新”時顯示日歷和選擇日期沒有問題,但是當我單擊“創建”時,除日期外,所有數據都顯示正常,它是空白的。 在控制台中,我收到ERROR Error: The pipe 'date' could not be found!

我真的很感激你的幫助

要僅顯示日期值,您應該在列設置中添加類似這樣的內容:

valuePrepareFunction: (value: string) => {
    return new Date(value).toLocaleDateString();
},

這准備在不處於編輯器模式時顯示的值。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM