DEV Community

Sachin Dilshan
Sachin Dilshan

Posted on

I built a zero-dependency, standalone date range picker for Angular 17+ (ngxsmk-datepicker)

Hello Angular devs!

I've been working on a new component and am excited to share ngxsmk-datepicker πŸ“…. This is a highly customizable date range picker built from the ground up to be a zero-dependency, standalone component for the latest versions of Angular (17+).

The goal was to create a feature-rich datepicker that doesn't force users to pull in a massive UI library.

Why use ngxsmk-datepicker?
⚑ Truly Standalone: No external dependencies. Just drop the component in for maximum performance and smallest bundle size.

🌍 Advanced i18n & Localization: It automatically handles the complex regional settings, correctly formatting month names and determining the first day of the week based on the user's browser locale (navigator.language).

🎨 Highly Customizable: Built-in Light/Dark themes and easy custom color theming using simple CSS variables.

πŸ› οΈ Full Flexibility: Supports Single Date and Date Range modes, comes with pre-defined quick ranges (like "Last 7 Days"), and allows for custom date disabling logic (e.g., locking out weekends/holidays).

πŸ”„ Input Compatibility: Accepts Date objects, strings, Moment, or Dayjs objects for maximum compatibility.

I'm currently working on version 1.0.4 and would love any feedback from the community on features or styling, especially regarding real-world use cases!

Try the Demo (StackBlitz):https://stackblitz.com/~/github.com/toozuuu/ngxsmk-datepicker

GitHub / Installation:https://github.com/toozuuu/ngxsmk-datepicker

NPM: https://www.npmjs.com/package/ngxsmk-datepicker

Thanks for checking it out!

Top comments (0)