NEURALNG
FORMSBETA

DatePicker

A timezone-safe date, range, multiple, month, year, time and datetime control with localized parsing, accessible grid navigation and typed Angular Forms integration.

Serializable valuesLocale + RTLSignal Forms ready

GET STARTED

Import

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

app.ts TypeScript 
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.

Model: 2026-08-18

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.

Date + ISO weeks
Month
Year

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.

Travel period
Choose a start date
Available days
2 selected

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.

Time and datetime

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

Meeting time
14:30:00
Release window

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.

Locale
First day of week
Localized DatePicker
 en-US · LTR · week starts Sunday

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.

Reactive Forms
NgModel
Signal Forms

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.

No semantic event yet.

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.