ngx-eonasdan-datetimepicker

ngx-eonasdan-datetimepicker - is a component wrapper for the eonasdan-bootstrap-datetimepicker.

Demo

Demo you can find here

Installation

Install package:

npm i ngx-eonasdan-datetimepicker --save-dev

Add module in your application:

import { SqDatetimepickerModule } from 'ngx-eonasdan-datetimepicker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    SqDatetimepickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

Reactive form:

field1: Moment;

constructor(private fb: FormBuilder) {
  this.reactiveForm = this.fb.group({
    field1: [this.field1]
  });
  this.reactiveForm.valueChanges.subscribe((changes) => {
    this.field1 = changes.field1;
  });
}

<form [formGroup]="reactiveForm">
  <div class="form-group">
    <sq-datetimepicker [options]="options" formControlName="field1"></sq-datetimepicker>
  </div>
</form>

ngModel control:

<div class="form-group">
  <sq-datetimepicker [options]="options" [(ngModel)]="field1"></sq-datetimepicker>
</div>