Complete Date & Time Picker Suite for Angular
📚 Documentation • 🚀 Quick Start • 📦 Components • 🤝 Contributing
NGX-Chronica is a comprehensive Angular library providing 6 specialized date and time picker components that fill critical gaps in the Angular ecosystem. Built with modern Angular practices, full TypeScript support, and zero external dependencies.
The Angular ecosystem lacks robust, production-ready Date &Time Picker components. NGX-Chronica addresses these gaps with components that are:
- ✅ Battle-Tested - Used in production applications
- ✅ Zero Dependencies - No Moment.js, date-fns, or other heavy libraries
- ✅ Fully Typed - Complete TypeScript definitions
- ✅ Accessible - WCAG 2.1 AA compliant
- ✅ Themeable - 8 color themes + dark mode
- ✅ i18n Ready - 11 built-in locales + custom locale support
| Component | Description | Key Features |
|---|---|---|
| DatePicker | Single date selection with popup | Min/max dates, disabled dates, locale support |
| DateRange | Start/end date selection | Hover preview, quick presets, validation |
| InlineCalendar | Always-visible calendar | Embedded display, no popup overhead |
| TimePicker | Time selection (12h/24h) | Step intervals, min/max time, seconds support |
| DateTimePicker | Combined date + time | Unified interface, flexible layout |
| DurationPicker | Time span selection | Days/hours/minutes/seconds, preset durations |
- 🗓️ 6 Specialized Components - Complete toolkit for all date/time needs
- 🎨 8 Color Themes - Blue, Green, Purple, Red, Orange, Teal, Pink, Indigo
- 🌍 11 Built-in Locales - EN, ES, FR, DE, IT, PT, ZH, JA, KO, RU + custom
- 📱 Responsive - Mobile-friendly with touch support
- 🚫 Smart Validation - Min/max constraints, disabled dates/times
- 📝 Form Integration - Full
ControlValueAccessorsupport - ⚡ Standalone Components - Works with standalone or NgModule apps
- ♿ Accessible - Keyboard navigation, ARIA labels, screen readers
- 🎯 TypeScript First - Comprehensive type definitions
- 🎨 Customizable - CSS custom properties for theming
npm install ngx-chronicaimport { Component } from '@angular/core';
import { ChronicaDatepickerComponent } from 'ngx-chronica';
@Component({
selector: 'app-example',
standalone: true,
imports: [ChronicaDatepickerComponent],
template: `
<chronica-datepicker
[(ngModel)]="selectedDate"
[config]="{ colorTheme: 'blue', theme: 'light' }"
(dateSelected)="onDateSelected($event)"
/>
`,
})
export class ExampleComponent {
selectedDate: Date | null = new Date();
onDateSelected(date: Date) {
console.log('Selected:', date);
}
}This is a monorepo containing:
ngx-chronica/
├── projects/chronica/ # 📦 Library source code
│ ├── src/lib/
│ │ ├── components/ # 6 picker components
│ │ ├── models/ # TypeScript interfaces
│ │ ├── utils/ # Utility functions
│ │ └── chronica.module.ts # Optional NgModule
│ └── public-api.ts # Public API exports
├── src/ # 🌐 Documentation website
│ ├── app/
│ │ ├── components/ # Demo components
│ │ └── features/ # Feature pages
│ └── assets/ # Static assets
└── docs/ # 📚 Additional documentation
- Node.js 18+ and npm 9+
- Angular CLI 19+
# Clone the repository
git clone https://github.com/klajdm/ngx-chronica.git
cd ngx-chronica
# Install dependencies
npm install
# Start development server (documentation site)
npm start
# Build the library
npm run build:lib
# Run tests
npm test
# Lint code
npm run lint- Create component in
projects/chronica/src/lib/components/ - Implement
ControlValueAccessorinterface - Add models to
projects/chronica/src/lib/models/ - Export in
public-api.ts - Add to
ChronicaModule - Create demo page in
src/app/features/ - Update documentation
# Run unit tests
npm test
# Run tests with coverage
npm run test:coverage
# Run e2e tests
npm run e2e- Standalone First - All components are standalone by default
- Type Safety - Comprehensive TypeScript interfaces
- Zero Dependencies - No external date libraries
- Accessibility - WCAG 2.1 AA compliant
- Performance - OnPush change detection, lazy loading
- Modularity - Tree-shakeable exports
All picker components follow this pattern:
@Component({
standalone: true,
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Component), multi: true },
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChronicaComponent implements ControlValueAccessor, OnInit, OnDestroy {
// Angular CDK Overlay for popups
private overlayRef: OverlayRef | null = null;
// ControlValueAccessor implementation
writeValue(value: T): void {}
registerOnChange(fn: any): void {}
registerOnTouched(fn: any): void {}
setDisabledState(isDisabled: boolean): void {}
}We welcome contributions! Here's how you can help:
- 🐛 Report Bugs - Open an issue
- 💡 Suggest Features - Start a discussion
- 📝 Improve Docs - Fix typos, add examples
- 🔧 Submit PRs - Fix bugs, add features
- ⭐ Star the Repo - Show your support!
- Fork the repository
- Create a feature branch -
git checkout -b feature/amazing-feature - Follow coding standards - Run
npm run lint - Write tests - Maintain >90% coverage
- Update documentation - Add examples and API docs
- Commit with conventional commits -
feat:,fix:,docs:, etc. - Push to your fork -
git push origin feature/amazing-feature - Open a Pull Request - Describe your changes
- Use TypeScript strict mode
- Follow Angular style guide
- Use OnPush change detection
- Implement ControlValueAccessor for form components
- Add ARIA attributes for accessibility
- Write comprehensive tests
feat(datepicker): add keyboard navigation
fix(time-picker): resolve 12h/24h conversion bug
docs(readme): update installation instructions
test(duration): add validation tests
perf(calendar): optimize date generation
style(components): apply consistent spacing
refactor(utils): extract date utilities
ci(github): add automated testing
- ✅ DatePicker component
- ✅ DateRange component
- ✅ InlineCalendar component
- ✅ TimePicker component
- ✅ DateTimePicker component
- ✅ DurationPicker component
- ✅ 11 built-in locales
- ✅ 8 color themes
- ✅ Dark mode support
- 🔄 Timezone Picker - Global timezone selection
- 🔄 Recurring Event Picker - Schedule repeating events
- 🔄 Calendar Heatmap - Data visualization over time
- 🔄 Month/Year Picker - Quick month/year selection
- 🔄 Week Picker - Select entire weeks
- 🔄 Quarter Picker - Business quarter selection
- 🔄 Age Calculator - Date difference calculations
- 🔄 Countdown Timer - Live countdown displays
- 📱 Enhanced mobile gestures (swipe navigation)
- ⌨️ Advanced keyboard shortcuts
- 🎨 Theme builder tool
- 🌐 More locale support (20+ languages)
- 📦 Smaller bundle size optimizations
- 🧪 Comprehensive E2E test suite
NGX-Chronica is optimized for performance:
- Tree-shakeable - Only import what you need
- OnPush Change Detection - Minimal re-renders
- Lazy Loading - Components load on demand
- Small Bundle Size - ~15KB per component (gzipped)
- No External Dependencies - Zero runtime dependencies
- Virtual Scrolling - Efficient rendering for large lists
| Angular | NGX-Chronica | Status |
|---|---|---|
| 15.x | 1.x | ✅ Supported |
| 16.x | 1.x | ✅ Supported |
| 17.x | 1.x | ✅ Supported |
| 18.x | 1.x | ✅ Supported |
| 19.x | 1.x | ✅ Supported |
MIT License - see LICENSE file for details.
- 📚 Documentation - Full API docs and examples
- 🚀 Getting Started - Quick start guide
- 🐛 Issue Tracker - Report bugs
- 💬 Discussions - Ask questions
- 📦 npm Package - Install via npm
- 🤝 Contributing - Contribution guide
Made with ❤️ for the Angular community