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

:clap: & :heart: to auto badger for making badging simple

For Documentation, configuration click here

Playground / configuration generator

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

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

Announcements

• Date: 17th Mar 2021 v2.4.1
  1. Allowing use of escape key to close the calendars
• Date: 10th Mar 2021 v2.4.1
  1. Making dates on calendar more screen reader friendly
• Date: 31st Dec 2020 v2.4.0
  1. Added 12 hours time format support
• Date: 01 Dec 2020 v2.3.2
  1. Added disableWeekEnds, disabledDays, disabledDates
• Date: 01 Dec 2020 v2.3.1
  1. Handeling onChanges component lifecycle hook
• Date: 30 Nov 2020 v2.3.0
  1. Added options hideControls, readOnly, placeholder
  2. Added touch support too (Behind toggle and WIP) (Open issue on github if you want to try out touch support)
• Date: 26 Nov 2020 v2.2.10
  1. Added option to set week start day issue #47
• Date: 19 Nov 2020 v2.1.9
  1. Added intelligent position detector to avoid horizontal scroll
  2. Using css variables to color the previous next chevron arrows
• Date: 13th Nov 2020 v2.1.8
  1. Using modern css (flexbox)
  2. Removing dependency on bootstrap (now works without bootstrap too)
  3. Adding option for theme
  4. Added screen reader and keyboard accessibility
• Date: 25 Oct 2020
  1. Removed momentjs now using dayjs
• Date: 17 Oct 2020
  1. This is a successor of this package located here angular-2-daterangepicker
  2. Published next major version. v1.0.0
  3. Fixed issue #45
  4. If you want to use this module with angular < v6. Then install v1.1.52 of this package
  5. This package uses angular version 6 or above

Todos

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

Facing Problems

Please let me know if you are facing any issues here

Contributions

Would :heart: to see any contributions.

How to contribute

P.S. The code for demo which lies in src folder

P.S. Actual code for npm package lies in projects/angular-datetimerangepicker directory

1. Fork this repo
2. npm install @angular/cli@6
3. npm install
4. ng build angular-datetimerangepicker --watch
5. run ng serve in another terminal window/shell
6. Make changes
7. Raise PR