ngx-bootstrap-datetime-popup is a date and time popup picker using the angular ngx-bootstrap library.

best date time picker angular, mat datetimepicker angular, time picker angular material, angular datepicker example, angular material time picker dropdown

Note: Do not use 5.0.0 this is broken!! Please use 5.0.1+ with NGX-BOOTSTRAP 5.0.0+. If you require ngx-bootstrap v4+, keep using 4.3.0+. For angle 10, please use 6.0.0+

How to make use of it:

Installation:

# Yarn
$ yarn add ngx-bootstrap-datetime-popup

# NPM
$ npm install ngx-bootstrap-datetime-popup  --save

1. To use the component, import DatetimePopupModule via your .ts code, and add it to your modules using the .forRoot() function.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { DatepickerModule } from 'ngx-bootstrap/datepicker';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { DatetimePopupModule } from 'ngx-bootstrap-datetime-popup';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    BsDropdownModule.forRoot(),
    DatepickerModule.forRoot(),
    TimepickerModule.forRoot(),
    DatetimePopupModule.forRoot()
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
  
}

2. Now add the component to your HTML.

<datetime-popup [(value)]="myDate"></datetime-popup>

date time picker bootstrap, ngx-bootstrap-datetime-popup Plugin/Github, angularmaterialdatepicker npm, date time picker angular npm

See Demo And Download

Official Website(Gillardo): Click Here

This superior jQuery/javascript plugin is developed by Gillardo. For extra advanced usage, please go to the official website.