ng2-smart-table datepicker

Readme.md

Demo

https://stackblitz.com/edit/ng-date-picker-smart-table

Install

npm install --save ng-pick-datetime

Setup

Add the component in this gist to your project

Add the following packages to your package.json at at least these versions: "ng-pick-datetime": "7.0.0" "ng2-smart-table": "1.5.0"

Add the following to your module:

import { FormsModule } from '@angular/forms';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
import { SmartTableDatepickerComponent, SmartTableDatepickerRenderComponent } from './your-path-to/smart-table-datepicker.component'

@NgModule({
  imports: [
    FormsModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
  ],
  declarations: [
    ...,
    SmartTableDatepickerComponent,
    SmartTableDatepickerRenderComponent
  ],
  entryComponents: [
    ...,
    SmartTableDatepickerComponent,
    SmartTableDatepickerRenderComponent
  ],
  ...
})

Add to your smart table settings:

{
  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'
          }
        }
      }
   }
}

smart-table-datepicker.component.css

.fa {
    font-size: 1.2rem;
}

input {
    padding: .375em .75em !important;
}

smart-table-datepicker.component.html

<div class="input-group">
    <span [owlDateTimeTrigger]="dt" class="input-group-addon"><i class="fa fa-calendar"></i></span>
    <input
        [owlDateTimeTrigger]="dt" [owlDateTime]="dt"
        [(ngModel)]="inputModel"
        placeholder="{{placeholder}}"
        [min]='min' [max]='max'
        readonly
        class="form-control">
</div>
<owl-date-time #dt [stepMinute]="15" [hour12Timer]='true' (afterPickerClosed)="onChange()"></owl-date-time>

smart-table-datepicker.component.ts

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

@Component({
  selector: 'smart-table-datepicker',
  templateUrl: './smart-table-datepicker.component.html',
  styleUrls: ['./smart-table-datepicker.component.css']
})
export class SmartTableDatepickerComponent extends DefaultEditor implements OnInit {

  @Input() placeholder: string = 'Choose a Date/Time';

  @Input() min: Date; // Defaults to now(rounded down to the nearest 15 minute mark)

  @Input() max: Date; // Defaults to 1 month after the min

  stringValue;
  inputModel: Date;

  constructor() {
    super();
  }

  ngOnInit() {
    if(!this.min) {
      this.min = new Date();
      this.min.setMinutes(Math.floor(this.min.getMinutes() / 15) * 15 );
    }

    if(!this.max) {
      this.max = new Date(this.min);
      this.max.setFullYear(this.min.getFullYear() + 1);
    }

    if(this.cell.newValue) {
      let cellValue = new Date(this.cell.newValue);
      if(cellValue.getTime() >= this.min.getTime() && cellValue.getTime() <= this.max.getTime()) {
        this.inputModel = cellValue;
        this.cell.newValue = this.inputModel.toISOString();
      }
    }

    if(!this.inputModel) {
      this.inputModel = this.min;
      this.cell.newValue = this.inputModel.toISOString();
    }
  }

  onChange() {
    if(this.inputModel) {
      this.cell.newValue = this.inputModel.toISOString();
    }
  }
}

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

  constructor() { }

  ngOnInit() { }

}

how to import and where to import the "SmartTableDatepickerRenderComponent" and "SmartTableDatepickerComponent"

you add it to your settings JSON config the imports will be in your ts file for where the settings are used (if you set up your files as json in the ts in which you are using for the table)

I'm getting " super( ) ; " error, can any one help me out?

This is not working :( Any working example would be appreciated. I am stuck and have timeline to meet 😢

Here is an example updated to latest angular/ng2-smart-table/etc

https://stackblitz.com/edit/ng-date-picker-smart-table

Important note: you need to update your app.module.ts, and make sure you both declare, and set both the render component / editor as entryComponents:

  declarations: [
    ...,
    SmartTableDatepickerComponent,
    SmartTableDatepickerRenderComponent
  ],
  entryComponents: [
    ...,
    SmartTableDatepickerComponent,
    SmartTableDatepickerRenderComponent
  ],

If you are having any specific errors, let me know and we can try and figure it out. I also updated the readme to add these notes and what I needed to do to make the gist work.

thx @brgaulin - yes that was missing and I added it now. I am following the link you mentioned. Still get this error:

where as dt is not declared in your example and it works. Any idea?

Make sure you import FormsModule on your module

Thanks @brgaulin - its started working - now I have rendering issue - I added Font awesome and also Material design. I tried both CSS together and one by one but no luck. See this:

Only difference is I am using SCSS in my angular project rather CSS - any idea what causing this?

Make sure when installing ng-pick-datetime you add in their css file. I just put mine in to the angular project(angular.json) so it is available globally

Thanks you very much @brgaulin - it worked now. Putting the learnings together for someone if having issues:

1. Use this example to follow: https://stackblitz.com/edit/ng-date-picker-smart-table
2. Make sure to add following in app.module.ts file

    ...,
    SmartTableDatepickerComponent,
    SmartTableDatepickerRenderComponent
  ],
  entryComponents: [
    ...,
    SmartTableDatepickerComponent,
    SmartTableDatepickerRenderComponent
  ],```
3. Import the **FormsModule** on your module
4. Add ng-pick-datetime styles to your **angular.json** file

Happy coding!

Thanks @brgaulin - its started working - now I have rendering issue - I added Font awesome and also Material design. I tried both CSS together and one by one but no luck. See this:

Only difference is I am using SCSS in my angular project rather CSS - any idea what causing this?

Hey how did you solve this issue ?

Thanks @brgaulin - its started working - now I have rendering issue - I added Font awesome and also Material design. I tried both CSS together and one by one but no luck. See this:

Only difference is I am using SCSS in my angular project rather CSS - any idea what causing this?

Hey how did you solve this issue ?

Add this :- "node_modules/ng-pick-datetime/assets/style/picker.min.css",
in your angular.json styles[].

Hey! I want to use this but in my project I'm using 1.4.0 version of "ng2-smart-table" and I cannot update right now. Is there any previous version of "ng-pick-datetime" compatible with that version of "ng2-smart-table"?