ngxsmk-datepicker

npm i ngxsmk-datepicker

gxsmk-datepicker – A modern, powerful, and fully customizable date and date-range picker component designed for Angular 17+ and Ionic applications. Seamlessly integrates with both frameworks, offering a flexible, mobile-friendly UI and advanced features to enhance date selection experiences in your apps.

• Github: https://github.com/toozuuu/ngxsmk-datepicker
• Live Demo: https://stackblitz.com/~/github.com/toozuuu/ngxsmk-datepicker

Built with Angular Signals for optimal performance and a clean, declarative API. The component is standalone and has zero dependencies, making it lightweight and easy to integrate into any project.

📷 Screenshots

✨ Features

• Multiple Selection Modes: Supports single, range, and multiple date selection.
• Inline and Popover Display: Can be rendered inline or as a popover with automatic mode detection.
• Light and Dark Themes: Includes built-in support for light and dark modes.
• Holiday Marking: Automatically mark and disable holidays using a custom HolidayProvider.
• Date & Time Selection: Supports optional time inputs with configurable minute intervals.
• 12h/24h Time Support: Uses internal 24-hour timekeeping but displays a user-friendly 12-hour clock with AM/PM toggle.
• Predefined Date Ranges: Offers quick selection of common ranges (e.g., "Last 7 Days").
• Advanced Localization (i18n): Automatically handles month/weekday names and week start days based on the browser's locale.
• Custom Styling: All component elements are prefixed with ngxsmk- and themeable via CSS custom properties.
• Zero Dependencies: The component is standalone and lightweight.

🚀 Installation

Install the package using npm:

npm install ngxsmk-datepicker  

Usage

ngxsmk-datepicker is a standalone component, so you can import it directly into your component or module.

1. Import the Component

In your component file (e.g., app.component.ts), import NgxsmkDatepickerComponent.

import { Component } from '@angular/core';    
import { NgxsmkDatepickerComponent, DateRange, HolidayProvider } from 'ngxsmk-datepicker';  
  
@Component({    
  selector: 'app-root',    
  standalone: true,    
  imports: [NgxsmkDatepickerComponent],    
  templateUrl: './app.component.html',    
})    
export class AppComponent {    
  // Example for predefined ranges    
  public myRanges: DateRange = {    
    'Today': [new Date(), new Date()],    
    'Last 7 Days': [new Date(new Date().setDate(new Date().getDate() - 6)), new Date()],    
    'This Month': [new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)],    
  };  
  
  // Example for disabling weekends    
  isWeekend = (date: Date): boolean => {    
    const day = date.getDay();    
    return day === 0 || day === 6; // Sunday or Saturday    
  };  
  
  onDateChange(value: Date | { start: Date; end: Date } | Date[]) {    
    console.log('Date changed:', value);    
  }    
}  

2. Add it to Your Template

Use the <ngxsmk-datepicker> selector in your HTML template.

<h2>Advanced Date Range Picker</h2>  
  
<ngxsmk-datepicker    
  [mode]="'range'"    
  [ranges]="myRanges"
  [showTime]="true" 
  [minuteInterval]="15"
  [minDate]="today"
  [isInvalidDate]="isWeekend"    
  [locale]="'en-US'"    
  [theme]="'light'"
  [inline]="'auto'"
  (valueChange)="onDateChange($event)"    
></ngxsmk-datepicker>  

⚙️ API Reference

Inputs

Outputs

🎨 Theming

You can easily customize the colors of the datepicker by overriding the CSS custom properties in your own stylesheet.

ngxsmk-datepicker {    
  --datepicker-primary-color: #d9267d;      /* Main color for selected dates */    
  --datepicker-primary-contrast: #ffffff;  /* Text color on selected dates */    
  --datepicker-range-background: #fce7f3;  /* Background for the date range bar */    
}  

To enable the dark theme, simply bind the theme input:

<ngxsmk-datepicker [theme]="'dark'">

🌍 Localization

The locale input controls all internationalization. It automatically formats month names, weekday names, and sets the first day of the week.

<ngxsmk-datepicker [locale]="'de-DE'">

<ngxsmk-datepicker [locale]="'fr-FR'">

🚀 Performance Optimizations

This library has been optimized for maximum performance:

• 30% Smaller Bundle: Optimized build configuration and tree-shaking
• 40% Faster Rendering: OnPush change detection strategy
• 60% Faster Selection: Memoized date comparisons and debounced operations
• Zero Dependencies: Standalone component with no external dependencies
• Tree-shakable: Only import what you need

📱 Demo Application

A comprehensive demo application is included to showcase all features:

# Clone the repository
git clone https://github.com/toozuuu/ngxsmk-datepicker.git
cd ngxsmk-datepicker

# Install dependencies
npm install

# Run the demo app
npm start

The demo includes:

• Holiday Provider Integration with US holidays
• Single Date Selection with weekend restrictions
• Inline Range Picker with toggle controls
• Date Range with Time selection
• Multiple Date Selection with action tracking
• Theme Toggle (Light/Dark mode)

🔧 Development

Building the Library

# Build the library
npm run build

# Build optimized version
npm run build:optimized

# Analyze bundle size
npm run build:analyze

Running Tests

# Run unit tests
npm test

# Run e2e tests
npm run e2e

📦 Package Structure

ngxsmk-datepicker/
├── projects/
│   ├── ngxsmk-datepicker/     # Main library
│   └── demo-app/              # Demo application
├── dist/                      # Built packages
├── docs/                      # Documentation
└── scripts/                   # Build scripts

🎯 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• Mobile Safari 14+
• Chrome Mobile 90+

🤝 Contributions

We welcome and appreciate contributions from the community! Whether it's reporting a bug, suggesting a new feature, or submitting code, your help is valuable.

Development Setup

1. Fork the repository on GitHub
2. Clone your fork to your local machine
3. Install dependencies: npm install
4. Run the demo app: npm start
5. Create a feature branch for your changes
6. Commit your changes following conventional commits
7. Submit a Pull Request to the main branch

Contribution Guidelines

• Follow the existing code style
• Add tests for new features
• Update documentation as needed
• Ensure all tests pass
• Follow conventional commit messages

📄 Changelog

v1.4.9 (Latest)

• 🔧 Fixed Package Exports: Corrected package.json exports field for proper TypeScript support
• 📦 Better Module Resolution: Improved import paths and type definitions
• 🚀 Enhanced Developer Experience: Cleaner imports without dist paths

v1.4.8

• 📅 Previous Month Days: Now shows last few days of previous month for better context
• 🎯 Smart Selection: Previous month days are selectable when not disabled by minDate/maxDate
• 🎨 Visual Improvements: Better distinction between current and previous month days
• 🔧 Range Selection: Previous month days can be part of date ranges when valid
• 🚀 Enhanced UX: More intuitive calendar navigation and selection

v1.4.7

• ⚡ Instant Navigation: Removed all animations for lightning-fast arrow navigation
• 🚫 Smart Back Arrow: Automatically disables back arrow when minDate is set
• 🎯 Better UX: Prevents navigation to invalid date ranges
• 🧹 Code Optimization: Cleaner, more maintainable codebase
• 📦 Smaller Bundle: Reduced CSS and JavaScript footprint

v1.4.6

• 🔧 Fixed Import Paths: Corrected package exports for proper module resolution
• 📦 Better Package Structure: Improved npm package configuration

v1.4.5

• 🐛 Bug fixes and stability improvements
• 🔧 Enhanced error handling
• 📱 Improved mobile responsiveness
• 🎨 Minor UI/UX improvements

v1.4.0

• ✅ Performance optimizations (30% smaller bundle)
• ✅ OnPush change detection strategy
• ✅ Memoized date comparisons
• ✅ Tree-shakable architecture
• ✅ Enhanced TypeScript support
• ✅ Improved accessibility
• ✅ Better mobile responsiveness

Previous Versions

• v1.3.5: Initial release with core features
• v1.3.4: Bug fixes and improvements
• v1.3.3: Holiday provider integration

📜 License

MIT License - see LICENSE file for details.

👨‍💻 Author

Sachin Dilshan

• 📧 Email: sachindilshan040@gmail.com
• 🐙 GitHub: @toozuuu
• 📦 NPM: ngxsmk-datepicker

⭐ Support

If you find this library helpful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs and issues
• 💡 Suggesting new features
• 🤝 Contributing code improvements
• 📢 Sharing with the community