Date and Time Picker Popup Using ngx-bootstrap Library

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:


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

$ 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';

  imports: [
  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.

Related Posts


Star Rating Plugin Control Based On Radio Buttons

Star Rating Radio Buttons, the star rating plugin is a plugin for the jQuery Javascript library that creates a non-intrusive star rating control based on a set…


A Pure QRCode Encode and Decode JavaScript Library | Decoding/Encoding

QR Code With Pure JavaScript – A pure JavaScript QRCode encode and decode library. QR code encoder and decoder instruments help you shortly generate QR codes from…


Simple and Lightweight Vertical 3-Dot Context Menu

The 3-dot Context Menu allows for a simple and lightweight implementation to show 3 vertical dots allowing the user to click and show a menu. Below is…


Pure Toast Notification JavaScript Library | Toastify JS

Toast Notification JavaScript – Toastify JS is an easy, lightweight, vanilla JavaScript library used for sending stackable, non-blocking toast messages to end customers. Features Multiple stacked notifications…


Dialogs Based on Bootstrap 5 Modal Component | BS-DIALOGS

BS-DIALOGS is a small library for creating modal windows for notification and input using the Bootstrap 5 modal. It automatically handles DOM processing and provides callbacks to…


Creating Swipeable Image Carousel | Slider-cut

slider-cut is a modern, responsive, effective, and easy-to-use mobile circular component that enables you to rotate through images by mouse drag and touch gestures or by pressing…