ng-bootstrap-datetime

Angular Date Time Picker

This package supports Angular 7

Description

---

This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices.

Dependencies

@ng-bootstrap/ng-bootstrap ^1.0.0

moment ^2.24.0

bootstrap ^4.0.0

How to Use

1. Install with npm:npm install ng-bootstrap-datetime --save

2. Add NgBootstrapDatetimeAngularModule to your @NgModule like example below

   import { BrowserModule } from "@angular/platform-browser";
   import { NgModule } from "@angular/core";
   
   import { AppComponent } from "./app.component";
   import { FormsModule, ReactiveFormsModule } from "@angular/forms";
   import { CommonModule } from "@angular/common";
   
   import { NgBootstrapDatetimeAngularModule } from "ng-bootstrap-datetime";
   
   @NgModule({
     declarations: [AppComponent],
     imports: [
       BrowserModule,
       FormsModule,
       ReactiveFormsModule,
       NgBootstrapDatetimeAngularModule,
       CommonModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule {}

3. Add your input into form like example below

   <form>
     <div [formGroup]="formGroup">
       <ng-bootstrap-datetime
         inputDatetimeFormat="dd/MM/yyyy hh:mm a"
         formControlName="activeEndDate"
         name="activeEndDate"
       ></ng-bootstrap-datetime>
     </div>
   </form>

4. Connect to your component

   import { Component, OnInit } from "@angular/core";
   import { FormGroup, FormControl, Validators } from "@angular/forms";
   
   @Component({
     selector: "app-root",
     templateUrl: "./app.component.html",
     styleUrls: ["./app.component.scss"]
   })
   export class AppComponent implements OnInit {
     title = "Date";
     formGroup: FormGroup;
   
     ngOnInit() {
       this.formGroup = new FormGroup({
         activeEndDate: new FormControl(null, {
           validators: [Validators.required]
         })
       });
     }
   }

License

• License: MIT

Author

Sam Bunthet