Introduction

fs-form-date is a date/time picker component built on the ava-ui DateTimePicker. It can be used standalone or together with fs-form.
It supports three modes — date, time, and datetime — and invokes the picker by tapping the input area, emitting the formatted value outward via the change event.

Usage

When importing locally, configure it in the page's index.json (you also need to import dialog-center as the popup container):

"usingComponents": {
  "fs-form-date": "/avaui-sub/fs-form/fs-form-date/index",
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

When used together with fs-form:

"usingComponents": {
  "fs-form": "/avaui-sub/fs-form/index",
  "fs-form-item": "/avaui-sub/fs-form/fs-form-item/index",
  "fs-form-date": "/avaui-sub/fs-form/fs-form-date/index",
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

PWC (custom component/plugin) usage: only the usingComponents registration uses the avaComponent:// protocol; other usage is the same.

When used standalone:

"usingComponents": {
  "fs-form-date": "avaComponent://avaui-sub/fs-form/fs-form-date/index"
}

Code Demos

1. Basic Usage

By default it displays in date mode. Bind a value via value and listen for value changes via the change event.

2. Type Switching (type attribute)

Switch between different selection modes via the type attribute: date, time, datetime.

3. Disabled State

Disable tap selection via the disabled attribute.

4. Used with fs-form

fs-form-date can be used as the content control of an fs-form-item, supporting form validation and data collection.

---

API

fs-form-date Attributes

Parameter	Description	Type	Optional Values	Default
value	Current value	String	—	''
placeholder	Placeholder text	String	—	''
type	Selection type	String	date / time / datetime	date
disabled	Whether disabled	Boolean	—	false
starttime	Start time (passed to DateTimePicker)	String	—	''
endtime	End time (passed to DateTimePicker)	String	—	''
bordered	Whether to show a border; in border mode a type icon is also displayed	Boolean	—	false

fs-form-date Events

Event Name	Description	Callback Parameters
change	Triggered after selection completes (used for fs-form update and validation)

Note: The change event has bubbles: true and composed: true enabled, so it can be captured by fs-form-item for form validation.

---

Design Notes

• The display style is consistent with fs-form-input to keep a unified form visual style.
• Supports the three common selection modes — date, time, and datetime — covering most business scenarios.
• Controls the selectable range via starttime / endtime, aligned with DateTimePicker capabilities.
• Guides user action with placeholder text when nothing is selected.
• When the bordered attribute is enabled, the input displays a rounded border and a type icon (calendar/clock) on the left, suitable for card-style scenarios that need visual distinction.

---

打开预览