Date

Date picker input for selecting dates. Provides a calendar popup on desktop and a native date picker on mobile.

Use Cases

• Date selection (applied date, interview date, start date, end date)
• Birthdate or anniversary selection
• Event date selection
• Data-bound date fields connected to page data sources

Properties

name

Unique field name. Type: string.

label

Label displayed above date picker. Type: string.

required

Whether date selection is required. Type: boolean. Default: false.

defaultValue

Default date value in YYYY-MM-DD format (not used when dataBinding is set). Type: string.

width

CSS width of the date input container. Type: string. Default: 100%.

Tip: Recommendations – full-width: use '100%' for standalone date fields; half-width: use '50%' when pairing two dates in a Grid; quarter-width: use '25%' when grouping four fields; auto: use 'auto' to fit content width.

min

Minimum selectable date in YYYY-MM-DD format. Prevents selection of earlier dates. Type: string.

Visual Impact: Dates before min are disabled/grayed out in date picker.

Tip: Recommendations – startDate: set min to today to prevent past dates; range: set min to the start date for end dates; validation: use min to enforce business rules (e.g., minimum age 18 years ago).

max

Maximum selectable date in YYYY-MM-DD format. Prevents selection of later dates. Type: string.

Visual Impact: Dates after max are disabled/grayed out in date picker.

Tip: Recommendations – endDate: set max to prevent unreasonable future dates; birthdate: set max to today to prevent future birthdates; validation: use max to enforce business rules (e.g., max age 100 years ago).

customCss

Custom CSS styles for advanced styling. Parsed as CSS property-value pairs. Type: string.

Tip: Security Note – parsed by cssParser utility. Tenants only affect their own pages (multi-tenant isolation enforced).

dataBinding

Data binding configuration to connect date input to a page data source field. Automatically populates the date value and saves changes back to the source. Type: object.

• pageDataSourceRef – Reference to page-level data source (format: '@page.{dataSourceId}'). Takes precedence over sourceId/sourceType. Type: string.
• sourceId – ID of the data source (database table or API connection). Type: string. Required.
• sourceType – Type of data source. Type: string. Options: table, api. Required.
• operationType – Operation type – 'Get' for single record (input fields use Get). Type: string. Options: Get. Required.
• fieldName – Name of the field/column to bind to (should be date or datetime field). Type: string. Required.
• isReadOnly – Whether date input is read-only (display only, no write back). Type: boolean. Default: false.
• writeOperation – Write operation type when saving changes. Type: string. Options: Create, Update. Default: Update.

Best Practices

• CRITICAL: Group related Date fields in Grid/Flex (Start Date + End Date, Applied On + Interview Date).
• Use clear labels: 'Applied On', 'Interview Date', 'Start Date' (not just 'Date').
• Set required: true for mandatory dates.
• Use dataBinding for edit forms to auto-populate dates from data source.

Common Mistakes

Stacking Date fields at full width without grouping related dates

Why it's a problem: Wastes horizontal space - related dates (Start + End, Applied + Interview) should be side-by-side.

Fix: Group related Date fields in Grid with numColumns: 2 (Start Date + End Date, Applied On + Interview Date).

Using vague labels like 'Date' or 'Date 1'

Why it's a problem: Unclear what date is being requested - confuses users.

Fix: Be specific: 'Applied On', 'Interview Date', 'Start Date', 'End Date'.

Not setting required: true for mandatory dates

Why it's a problem: No visual indicator that date is required - users skip it and get validation errors.

Fix: Set required: true for mandatory dates (shows asterisk indicator).