Search code examples
angulartypescriptangular5ng2-smart-table

Ng2-smart-table : Use datepicker format in the field


Is there any probability that I can use datepicker format in the ng2-smart-table.

jobSettings2: object = {
    columns: [
      {
        displayName: "Job ID",
        valueAs: "JobID",
        align: "left",
        columnWidth: "",
        type: "text",
        required: true
      },  



   <ng2-smart-table id="tableID" class="table table-hover" [settings]="jobSettings" [source]="jobSource" (userRowSelect)="selectjobs($event)"></ng2-smart-table>

Solution

  • For data you can use npm install --save ng-pick-datetime , This provide many features to play with date.

    If you want to use date picker with ng2-smart-table , you can do by it's property named renderComponent.

    {
     columns: {
        startDate: {
        title: 'Start Time',
        type: 'custom',
        renderComponent: SmartTableDatepickerRenderComponent,
        width: '250px',
        filter: false,
        sortDirection: 'desc',
        editor: {
          type: 'custom',
          component: SmartTableDatepickerComponent,
        }
      },
      endDate: {
        title: 'End Time',
        type: 'custom',
        renderComponent: SmartTableDatepickerRenderComponent,
        width: '250px',
        filter: false,
        editor: {
          type: 'custom',
          component: SmartTableDatepickerComponent,
          config: {
            placeholder: 'End Time'
          }
        }
      }
     }
    }
    

    Hear you have to manage by another component. And you have to render that component into ng2-smart-table.

    For more information please check this link.