Date Picker Field

LiqDatePickerField is the shadcn/ui-style date picker — a 44pt-tall pill trigger that displays the formatted date (or a placeholder) and opens a LiqCalendar in a popover beneath the field when tapped. Selecting a day commits the new value through onChanged and closes the popover; clicking outside dismisses without committing.

Distinct from:

• LiqCalendar — the standalone month grid with no surrounding chrome. Drop it inline anywhere you want a permanently visible date picker.
• LiqDatePicker — the wheel-style inline picker exposed under the pickers category.

Default

// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport 'package:docs_snippets/src/demo.dart';import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';​/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget datePickerFieldDefaultBuilder(BuildContext context) {  return SnippetFrame(    maxWidth: 560,    height: 520,    surface: SnippetFrameSurface.liquidThemed,    surfacePadding: const EdgeInsets.symmetric(horizontal: 34, vertical: 40),    child: Align(      alignment: Alignment.topCenter,      child: LiqDemo<DateTime?>(        initial: null,        builder:            (v, set) => SizedBox(              width: 360,              child: LiqDatePickerField(value: v, onChanged: set),            ),      ),    ),  );}

Preselected

// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport 'package:docs_snippets/src/demo.dart';import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';​/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget datePickerFieldPreselectedBuilder(BuildContext context) {  return SnippetFrame(    maxWidth: 560,    height: 520,    surface: SnippetFrameSurface.liquidThemed,    surfacePadding: const EdgeInsets.symmetric(horizontal: 34, vertical: 40),    child: Align(      alignment: Alignment.topCenter,      child: LiqDemo<DateTime?>(        initial: DateTime(2026, 5, 15),        builder:            (v, set) => SizedBox(              width: 360,              child: LiqDatePickerField(value: v, onChanged: set),            ),      ),    ),  );}