@some-angular-utils/date-range-picker

---

NPM

---

DEMO

This repo ships with an interactive showcase app — every usage pattern has a live, editable example (edit the code, the picker updates in real time). Run it locally:

npm install
npm run dev

Then open http://localhost:4200.

IMPORT

import { SAUDateRangePickerModule} from '@some-angular-utils/date-range-picker';

@Component({
    imports: [SAUDateRangePickerModule],
    // ...
})

TYPESCRIPT

public dateRange = new FormControl<[Date, Date] | null>(null);

constructor() {
    this.dateRange.valueChanges.subscribe((range) => {
        // range -> [Date, Date] | null
    });
}

HTML

<sau-date-range-picker
    label="Travel dates"
    placeholder="Select a date range"
    [formControlItem]="dateRange">
</sau-date-range-picker>

INPUTS

label (optional label rendered above the field) · placeholder (shown when no range is selected) · formControlItem (any AbstractControl — works with Validators.required and custom validators like any other reactive form field)

PRESETS

The dropdown ships with built-in presets: Hoy, Mañana, Hace 3 días, Mes actual, Próximo mes, Año actual, Próximo año — plus a "Rango personalizado..." option that opens a dual-month calendar.

COLORS

.sau-date-range {
    --sau-color-primary: rgb(147, 51, 234);
    --sau-color-background: rgb(255, 255, 255);
}