Modern Angular date range picker with Material Design featuring signals, control flow syntax, time picker, themes, and responsive design for Angular 21+
npm install ngx-datexbash
npm install ngx-datex
`
οΏ½ Quick Start
$3
`typescript
import { NgxDatex } from 'ngx-datex';
@Component({
selector: 'app-example',
imports: [NgxDatex], // For standalone components
template: ,
})
export class ExampleComponent {
selectedRange: NgxDatexValue | null = null;
predefinedRanges = {
Today: [startOfDay(new Date()), endOfDay(new Date())],
'Last 7 Days': [startOfDay(subDays(new Date(), 6)), endOfDay(new Date())],
'Last 30 Days': [startOfDay(subDays(new Date(), 29)), endOfDay(new Date())],
};
}
`
$3
`html
`
ποΈ Configuration Options
$3
| Property | Type | Default | Description |
| ------------------ | ------------------------------ | ---------------------- | ------------------------------------------- |
| singleDatePicker | boolean | false | Enable single date selection mode |
| timePicker | boolean | false | Enable time selection |
| timePicker24Hour | boolean | true | Use 24-hour format for time picker |
| autoApply | boolean | false | Auto-apply selection without confirm button |
| showDropdowns | boolean | false | Show month/year dropdowns in header |
| linkedCalendars | boolean | true | Link left and right calendar navigation |
| ranges | Record | DEFAULT_RANGES | Predefined date ranges |
| minDate | Date \| null | null | Minimum selectable date |
| maxDate | Date \| null | null | Maximum selectable date |
| locale | NgxDatexLocale | SPANISH_LOCALE | Localization settings |
| theme | NgxDatexTheme | MATERIAL_LIGHT_THEME | Theme configuration |
$3
| Event | Type | Description |
| ------------- | ------------------------------------------ | ----------------------------------- |
| dateChange | NgxDatexValue \| null | Emitted when date selection changes |
| rangeChange | {startDate: Date, endDate: Date \| null} | Emitted when range changes |
| openEvent | void | Emitted when picker opens |
| closeEvent | void | Emitted when picker closes |
π¨ Theming
$3
`typescript
import { MATERIAL_LIGHT_THEME } from 'ngx-datex';
@Component({
template: ,
})
export class ThemedComponent {
materialTheme = MATERIAL_LIGHT_THEME;
}
`
$3
`typescript
import { NgxDatexTheme } from 'ngx-datex';
const customTheme: NgxDatexTheme = {
name: 'custom-dark',
colors: {
primary: '#bb86fc',
secondary: '#03dac6',
background: '#121212',
surface: '#1e1e1e',
text: '#ffffff',
// ... other colors
},
typography: {
fontFamily: 'Roboto, sans-serif',
fontSize: '14px',
fontWeight: '400',
lineHeight: '1.5',
},
// ... other theme properties
};
`
π Internationalization
$3
`typescript
import { SPANISH_LOCALE } from 'ngx-datex';
@Component({
template: ,
})
export class LocalizedComponent {
spanishLocale = SPANISH_LOCALE;
}
`
$3
`typescript
import { NgxDatexLocale } from 'ngx-datex';
const frenchLocale: NgxDatexLocale = {
direction: 'ltr',
format: 'DD/MM/YYYY',
separator: ' - ',
applyLabel: 'Appliquer',
cancelLabel: 'Annuler',
daysOfWeek: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
monthNames: [
'Janvier',
'FΓ©vrier',
'Mars',
'Avril',
'Mai',
'Juin',
'Juillet',
'AoΓ»t',
'Septembre',
'Octobre',
'Novembre',
'DΓ©cembre',
],
firstDay: 1,
};
`
π± Mobile Support
The component automatically adapts to mobile devices with:
- Touch-friendly interface
- Optimized layout for small screens
- Native-like date selection experience
- Responsive design patterns
βΏ Accessibility
NgxDatex is built with accessibility in mind:
- Full keyboard navigation support
- ARIA labels and descriptions
- Screen reader compatibility
- High contrast support
- Focus management
π§ Advanced Usage
$3
`typescript
import { FormControl, ReactiveFormsModule } from '@angular/forms';
@Component({
imports: [ReactiveFormsModule, NgxDatex],
template:
,
})
export class ReactiveFormComponent {
form = this.fb.group({
dateRange: new FormControl(null),
});
}
`
$3
`typescript
@Component({
template:
,
})
export class ValidatedComponent {
minDate = new Date();
maxDate = addMonths(new Date(), 6);
isWeekend = (date: Date): boolean => {
const day = date.getDay();
return day === 0 || day === 6; // Disable weekends
};
}
`
$3
`typescript
@Component({
template:
,
})
export class TimePickerComponent {}
`
π API Reference
$3
#### NgxDatexValue
`typescript
interface NgxDatexValue {
startDate: Date;
endDate: Date | null;
label?: string;
}
`
#### NgxDatexLocale
`typescript
interface NgxDatexLocale {
direction?: 'ltr' | 'rtl';
format?: string;
separator?: string;
applyLabel?: string;
cancelLabel?: string;
daysOfWeek?: string[];
monthNames?: string[];
firstDay?: number;
}
`
#### NgxDatexTheme
`typescript
interface NgxDatexTheme {
name: string;
colors: {
/ color definitions /
};
typography: {
/ typography settings /
};
spacing: {
/ spacing scale /
};
borderRadius: {
/ border radius values /
};
shadows: {
/ shadow definitions /
};
}
``