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() { }

}

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"?