Skip to main content


Highly configurable, opinionated, themable, light weight (12kb) date and time range picker for angular

Build Status version min size mingzip size license

dependancies downloads all contributors code of conduct

stargazers number of forks Follow technikhil314 on twitter

👏 & ❤️ to auto badger for making badging simple

About this package

Date and time range picker for Angular v6 and above.

This is a successor of this package located here angular-2-daterangepicker

It is a fully responsive date and time range picker with or without bootstrap.css.

The purpose of this project is to remove dependencies on bootstrap, jquery etc.

No offence here. These are good libraries but with modern frameworks they add more footprint hampering the performance


  1. Get rid of moment to minimise the package [✔️]
  2. Make style more robust. Use latest CSS features. [✔️]
  3. Add theme support [✔️]
  4. Make touch friendly UI for touch devices

Playground / configuration generator

You can play around with all options here

Coding examples

  1. With predefined custom ranges
    • This requires dayjs installed
  2. Without predefined custom ranges
    • This does not require any dependency
  3. Without bootstrap
    • Plain css no customizations on styling