Date Input

import { NeuDateInputComponent } from '@neural-ui/core/date-input';
import type { NeuDatePreset, NeuDateRange } from '@neural-ui/core/date-input';

import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NeuDateInputComponent } from '@neural-ui/core/date-input';
import { NeuDatePreset, NeuDateRange } from '@neural-ui/core/date-input';

@Component({
  imports: [NeuDateInputComponent, ReactiveFormsModule],
  template: `
    <!-- Date Input — fecha, hora o fecha+hora / Date Input — date, time or date+time -->
    <neu-date-input label="Date of birth" [formControl]="dateCtrl" />
    <neu-date-input label="Start time" type="time" [formControl]="timeCtrl" />
    <neu-date-input label="Event" type="datetime-local" [formControl]="dateTimeCtrl" />
    <neu-date-input label="Date of birth" locale="en" [formControl]="dateCtrl" />

    <!-- Floating label -->
    <neu-date-input label="Date of birth" [floatingLabel]="true" [formControl]="dateCtrl" />
    <neu-date-input label="Start time" type="time" [floatingLabel]="true" [formControl]="timeCtrl" />

    <!-- Selector de rango de fechas / Date Range Picker — type="range" -->
    <neu-date-input
      type="range"
      label="Booking period"
      placeholder="Select dates"
      locale="en"
      [presets]="rangePresets"
      [formControl]="rangeCtrl"
    />

    <!-- Disabled dates, month/year picker and multiple dates -->
    <neu-date-input
      label="Maintenance days"
      [multiple]="true"
      [showMonthYearPicker]="true"
      [disabledDates]="isWeekend"
      [formControl]="multipleDatesCtrl"
    />
  `
})
export class MyComponent {
  readonly dateCtrl = new FormControl('', { nonNullable: true });
  readonly timeCtrl = new FormControl('', { nonNullable: true });
  readonly dateTimeCtrl = new FormControl('', { nonNullable: true });
  readonly rangeCtrl = new FormControl<NeuDateRange | null>(null);
  readonly multipleDatesCtrl = new FormControl<string[]>([], { nonNullable: true });

  readonly rangePresets: NeuDatePreset[] = [
    { label: 'Next 7 days', range: { start: '2026-07-10', end: '2026-07-16' } },
  ];

  readonly isWeekend = (date: Date) => [0, 6].includes(date.getDay());
}