I wanted to add a datetimepicker
component to the ng2-smart-table component.
All I'm able to do right now is add a datepicker
, but I want to add time in that as well.
I have tried with some owl-date-time component. but it's messing up the entire window.
HTML file
<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>
**.ts file**
@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() { }
I want a date-time-picker in ng2-smart-table to choose a date and time of the day.
I solved it!! Just follow this https://stackblitz.com/edit/ng-date-picker-smart-table-tjvgbe .
Don't forget to add the styles in the angular.json file, just like the stackblitz link.