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 Grid (Start Date + End Date); quarter-width: use '25%' when grouping 4 fields in Grid; auto: use 'auto' to fit content width (compact date picker).

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 prevent past dates (e.g., today’s date); range: set min to start date to ensure end comes after start; 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.

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 page data source field. Automatically populates date value and saves changes back to source. Type: object.

dataBinding.pageDataSourceRef

Reference to page-level data source (format: '@page.{dataSourceId}'). Takes precedence over sourceId/sourceType. Type: string.

dataBinding.sourceId

ID of the data source (database table or API connection). Type: string. Required.

dataBinding.sourceType

Type of data source. Type: string. Required. Options: table, api.

dataBinding.operationType

Operation type – 'Get' for single record (input fields use Get). Type: string. Required. Options: Get.

dataBinding.fieldName

Name of the field/column to bind to (should be date or datetime field). Type: string. Required.

dataBinding.isReadOnly

Whether date input is read-only (display only, no write back). Type: boolean. Default: false.

dataBinding.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)