feat: add a2ui DateTimeInput catalog component

.changeset/flat-moons-kneel.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+Add the DateTimeInput catalog component with an internal Lynx calendar/time picker implementation.

.github/a2ui-catalog.instructions.md

@@ -33,3 +33,5 @@ When verifying `packages/genui/a2ui-playground`, remember that `pnpm -F @lynx-js
 For known A2UI playground examples, keep the web preview URL on `?demo=<id>` instead of swapping it to the payload-store `messagesUrl`. `render.html` intentionally fetches known demo JSON in the browser shell and passes resolved messages into Lynx, avoiding fetch differences in the Lynx worker runtime; use payload-store URLs for custom edited JSON.
 
 For interactive A2UI playground component examples, bind mutable props through `{ path: ... }` and provide matching example data so the component preview emits an initial `updateDataModel` before `updateComponents`. Literal values render the initial state but cannot be changed by `setValue`, which only writes back to data-bound props.
+
+For the built-in `DateTimeInput`, keep date-enabled default output as `YYYY-MM-DD` unless `outputFormat` is explicitly provided. Implement calendar behavior inside `packages/genui/a2ui` with local helpers that borrow the `lynx-ui-calendar` windowing/date patterns as needed, because `@lynx-js/lynx-ui-calendar` is not an available package dependency here.

packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx

@@ -8,6 +8,7 @@ import {
   CheckBox,
   ChoicePicker,
   Column,
+  DateTimeInput,
   Divider,
   Icon,
   Image,
@@ -38,6 +39,7 @@ import cardManifest from '@lynx-js/a2ui-reactlynx/catalog/Card/catalog.json';
 import checkBoxManifest from '@lynx-js/a2ui-reactlynx/catalog/CheckBox/catalog.json';
 import choicePickerManifest from '@lynx-js/a2ui-reactlynx/catalog/ChoicePicker/catalog.json';
 import columnManifest from '@lynx-js/a2ui-reactlynx/catalog/Column/catalog.json';
+import dateTimeInputManifest from '@lynx-js/a2ui-reactlynx/catalog/DateTimeInput/catalog.json';
 import dividerManifest from '@lynx-js/a2ui-reactlynx/catalog/Divider/catalog.json';
 import iconManifest from '@lynx-js/a2ui-reactlynx/catalog/Icon/catalog.json';
 import imageManifest from '@lynx-js/a2ui-reactlynx/catalog/Image/catalog.json';
@@ -97,6 +99,7 @@ const ALL_BUILTINS: readonly CatalogInput[] = [
   manifestEntry(Icon, iconManifest),
   manifestEntry(CheckBox, checkBoxManifest),
   manifestEntry(ChoicePicker, choicePickerManifest),
+  manifestEntry(DateTimeInput, dateTimeInputManifest),
   manifestEntry(LineChart, lineChartManifest),
   manifestEntry(PieChart, pieChartManifest),
   manifestEntry(RadioGroup, radioGroupManifest),

packages/genui/a2ui-playground/src/catalog/a2ui.ts

@@ -6,6 +6,7 @@ import cardManifest from '@lynx-js/a2ui-reactlynx/catalog/Card/catalog.json';
 import checkBoxManifest from '@lynx-js/a2ui-reactlynx/catalog/CheckBox/catalog.json';
 import choicePickerManifest from '@lynx-js/a2ui-reactlynx/catalog/ChoicePicker/catalog.json';
 import columnManifest from '@lynx-js/a2ui-reactlynx/catalog/Column/catalog.json';
+import dateTimeInputManifest from '@lynx-js/a2ui-reactlynx/catalog/DateTimeInput/catalog.json';
 import dividerManifest from '@lynx-js/a2ui-reactlynx/catalog/Divider/catalog.json';
 import iconManifest from '@lynx-js/a2ui-reactlynx/catalog/Icon/catalog.json';
 import imageManifest from '@lynx-js/a2ui-reactlynx/catalog/Image/catalog.json';
@@ -1428,6 +1429,68 @@ export const COMPONENT_CATALOG: ComponentDoc[] = [
       openui: [],
     },
   },
+  {
+    name: 'DateTimeInput',
+    category: 'Input',
+    description:
+      'A date and/or time input with a calendar panel and configurable output format.',
+    props: schemaToProps(dateTimeInputManifest),
+    usage: {
+      a2ui: {
+        id: 'date-input',
+        component: 'DateTimeInput',
+        label: 'Date',
+        value: { path: '/date' },
+        enableDate: true,
+        enableTime: false,
+      },
+      openui: {},
+    },
+    usageExamples: {
+      a2ui: [
+        {
+          label: 'Date',
+          value: {
+            id: 'date-input',
+            component: 'DateTimeInput',
+            label: 'Date',
+            value: { path: '/date' },
+            enableDate: true,
+            enableTime: false,
+          },
+          data: { date: '2026-05-26' },
+        },
+        {
+          label: 'Date & Time',
+          value: {
+            id: 'datetime-input',
+            component: 'DateTimeInput',
+            label: 'Event date',
+            value: { path: '/eventDate' },
+            enableDate: true,
+            enableTime: true,
+            outputFormat: 'YYYY-MM-DD HH:mm',
+          },
+          data: { eventDate: '2026-05-26 19:30' },
+        },
+        {
+          label: 'Date Range',
+          value: {
+            id: 'booking-date',
+            component: 'DateTimeInput',
+            label: 'Booking date',
+            value: { path: '/bookingDate' },
+            enableDate: true,
+            enableTime: false,
+            min: '2026-05-01',
+            max: '2026-05-31',
+          },
+          data: { bookingDate: '2026-05-26' },
+        },
+      ],
+      openui: [],
+    },
+  },
   {
     name: 'ChoicePicker',
     category: 'Input',

packages/genui/a2ui/package.json

@@ -100,6 +100,11 @@
       "default": "./dist/catalog/ChoicePicker/index.js"
     },
     "./catalog/ChoicePicker/catalog.json": "./dist/catalog/ChoicePicker/catalog.json",
+    "./catalog/DateTimeInput": {
+      "types": "./dist/catalog/DateTimeInput/index.d.ts",
+      "default": "./dist/catalog/DateTimeInput/index.js"
+    },
+    "./catalog/DateTimeInput/catalog.json": "./dist/catalog/DateTimeInput/catalog.json",
     "./catalog/RadioGroup": {
       "types": "./dist/catalog/RadioGroup/index.d.ts",
       "default": "./dist/catalog/RadioGroup/index.js"