We've just rolled out a major feature upgrade for our Angular datepicker component, ngxsmk-datepicker, focusing heavily on delivering a cleaner user experience and powerful new extensibility points.
If you're building a business application, booking system, or any tool that needs advanced date handling, this update is for you.
✨ Highlights of v1.3.6
We addressed three key areas in this release: UX flow, visual performance, and modularity.
- Adaptive Display Modes (Popover & Inline) We've transformed how the calendar is displayed, making it flexible for any screen or layout:
Popover Mode (New Default): The calendar appears as a discrete popover when the input field is clicked. This mode is excellent for forms and complex views where space is limited. It automatically includes a Clear button in both the input field and the popover footer.
Inline Mode: For dashboards or permanent views, setting the [inline] input to true embeds the calendar directly into the page.
🚀 Silky Smooth Month Navigation
Nobody likes jumpy UI elements. We've introduced fluid CSS transitions to the month navigation. When you click the arrow buttons, the calendar grid now slides smoothly into the next month, dramatically enhancing the component’s overall feel and visual polish.🎁 The Big Feature: Pluggable Holiday Provider
This is the largest architectural improvement. For any application dealing with specific dates (like scheduling, payroll, or booking), marking and disabling non-working days is crucial.
We introduced the HolidayProvider interface, allowing you to inject your own logic for defining important dates.
How it works:
You create a simple class that implements the new interface, fetching or defining your custom rules (e.g., regional holidays, company shutdown days).
TypeScript
export interface HolidayProvider {
isHoliday(date: Date): boolean;
getHolidayLabel?(date: Date): string | null;
}
The datepicker uses your provider to automatically style (mark) these dates and display a tooltip with the holiday name.
Use the new [disableHolidays] input to instantly enforce these rules by blocking selection on all provided dates. This simplifies validation logic significantly!
Source Code
Want to see the fluid transitions or test the holiday disabling toggle?
Source Code: https://github.com/toozuuu/ngxsmk-datepicker
NPM: https://www.npmjs.com/package/ngxsmk-datepicker
Feel free to check out the repo, submit issues, or ask any questions about integrating the new features! We look forward to your feedback.
Top comments (1)
Awesome update! 🎉 Love the smooth transitions, popover flexibility, and especially the pluggable HolidayProvider. This is perfect for enterprise-grade date handling in Angular apps. 🚀