GET STARTED

Import

Import the canonical standalone component from its granular secondary entry point.

import { NeuralDatePicker } from '@neural-ng/core/date-picker';

@Component({
  imports: [NeuralDatePicker]
})
export class Checkout {}

Basic date selection

The model is a plain NeuralDateParts object. It survives SSR, JSON serialization and hydration without an implicit timezone conversion.

Day, month and year views

The day header moves into month and year selection. Dedicated picker modes expose the same navigation for month-only and year-only workflows; week numbers and adjacent days are opt-in.

Single, range and multiple

Range retains an incomplete start and previews the interval on hover. Multiple selection toggles immutable date entries and can keep the overlay open.

Availability and calendar constraints

Bounds, blocked dates, weekdays and predicates compose into one deterministic disabled state. This demo blocks weekends, two explicit dates, and days 13 and 21.

Immediate and draft actions

Today and Clear commit immediately by default. Apply/Cancel can hold ordinary date selections in a draft; time modes always use the draft model.

Time and datetime

Use 12/24-hour display, optional seconds and independent step sizes. Datetime bounds validate the complete draft before it is committed.

Localization and week ownership

Runtime locale controls labels, strict display format, month and weekday names, direction and default week start. A component override never mutates the application locale. Use provideNeuralNg({ locale }) for the application default, or bind [locale] for an isolated runtime override.

All three Angular Forms APIs

The same typed value contract works with Reactive Forms, template-driven forms and Angular Signal Forms without a second state store or compatibility wrapper.

Typed templates

Day, header, footer and all three navigation icon templates expose guarded contexts while the component retains behavior.

Semantic events

Model synchronization remains separate from user intent and overlay/view lifecycle events.

Unstyled and typed class slots

Unstyled removes NeuralNg visual classes but preserves structural hooks, ARIA, keyboard behavior and overlay ownership. This deliberately distinct example proves consumer ownership.

Semantic model

Keyboard contract

Focus and overlay

The shared Popover foundation uses the browser top layer, matches trigger width, flips/clamps inside the viewport and restores focus on dismissal. Destroying the control releases listeners and pending focus work.

Locale and RTL

Month/day names, messages, strict date format and week start come from NeuralLocaleService or a component override. RTL reverses logical horizontal navigation without changing the serialized value model.

Models

Inputs

The complete input surface is grouped by responsibility.

Outputs

valueChange synchronizes the model. Semantic outputs describe explicit user intent and do not fire for unrelated programmatic writes.

Typed template directives

neuralDatePickerDay, neuralDatePickerHeader, neuralDatePickerFooter, neuralDatePickerTriggerIcon, neuralDatePickerPreviousIcon and neuralDatePickerNextIcon.

Timezone-safe utilities

The entry point exports strict parsing/formatting, comparison, clamping, calendar construction, ISO week, native Date boundary conversion and date/time arithmetic helpers. Use parseNeuralLocaleDate instead of browser-dependent Date.parse.

Forms contract

NeuralDatePicker implements FormValueControl. Disabled, readonly, required, invalid, pending, touched and dirty state can flow through Angular Forms; do not add another CVA or mirror the value.

Design tokens

Typed class slots

NeuralDatePickerClasses covers root/input/trigger/panel, announcements, every calendar view, week/day states, range states, time fields and footer actions. Explicit aliases trigger and rangeStart/Middle/End remain supported.

Cascade order

Global provideNeuralNg({ unstyled: true }), Field-owned unstyled mode and component unstyled all retain behavior and structural *-root hooks.