AB Date Field

Date-only form field with typed input, calendar popup, min/max, and ISO value binding.

HTML tag: c-eb8f3e475b23946f2a645824ec3ec3184

When to use

• calendar date picker in a form
• date only (not time or timezone)
• min/max bounded date entry

Props

Prop	Type	Default	Description
label	String
value	String
readonly	Boolean
disabled	Boolean
display_format	String	DD/MM/YYYY
min	String
max	String
enabled	Boolean	true
date_format	String
formatted_value	String
clear_button_visible	Boolean	true
date_only	Boolean	true
lang	String	en
theme	String
use_in_basic_view	Boolean
label_position	String
label_width	String
input_field_name	String	Date picker
first_day_of_week	Number	1

Rules

• Bind .value as ISO date string (date_only adds time suffix internally on commit).
• Listen for value-changed when committed value updates; blur on focus leave.
• Use display_format for shown text; value stores canonical ISO.
• For time-only use ab-time-field; for datetime/range/timezone use ab-timestamp or Phase 4 timezone fields.

Events

Event	Detail
value-changed	String
blur

Methods

Signature	Description
_openCalendar()

What to avoid

Do not use for time-only (ab-time-field). Do not use ab-calendar standalone in forms when this field exists. _inputDisplayValue is internal display state, not the public change contract.

Example

<c-eb8f3e475b23946f2a645824ec3ec3184 .label=${'Start date'} .value=${startDate} .min=${minDate} .display_format=${'DD/MM/YYYY'} @value-changed=${onDateChange}></c-eb8f3e475b23946f2a645824ec3ec3184>