.png)
Aqua Basis
The AqDatePicker component is a versatile and powerful date selection component from the Aqua Design System which provide a smooth and intuitive experience.
Built to adapt to a wide variety of scenarios, it supports both single date selection and date range picking, with optional time input for more precise control.
Designed for flexibility, AqDatePicker offers customizable labels, placeholders, icons, and banners, while also supporting translations and different popover placements.
<aq-date-picker
has-time
is-range="false"
is-required
id="date-picker-range-hour"
format="MMMM dd, yyyy HH:mm"
placement="bottom-start"
label="Date Picker"
sublabel="This is a sublabel"
></aq-date-picker>
| Prop / Attr | Type | Default | Description |
|---|---|---|---|
value |
`string | IDateValue` | undefined |
isDisabled |
boolean |
– |
Disable the input. |
isRequired |
boolean |
– |
Mark the input as required. |
isReadonly |
boolean |
– |
Make the input readonly. |
isError |
boolean |
– |
Highlight the input as error. |
isPlain |
boolean |
– |
Render with plain style. |
isRange |
boolean |
false |
Enable range selection. |
hasTime |
boolean |
– |
Show time selector component below each calendar. |
ranges |
IRange |
RANGES |
Preset default ranges for selection and show them in a left panel. |
showSummaryHeader |
boolean |
true |
Show the summary date on the header. |
sublabel |
string |
– |
Subtext shown below the label. |
label |
string |
– |
Label for the field. |
info |
string |
– |
Enable a tooltip with additional info for the user. |
placeholder |
string |
– |
Placeholder text for the input. |
cid |
string |
– |
Component identifier. |
icon |
string |
– |
Icon to display at the right of the input. |
format |
string |
this.getDateISOFormat |
Format string for displaying the date. |
| The allowed formats are the same as LuxonJs. | |||
placement |
Placement |
– |
Placement of the calendar popover. |
closeOnClick |
boolean |
true |
Close the calendar on any click interaction. |
translations |
IDatePickerTranslation |
DEFAULT_TRANSLATIONS |
Translations for calendar texts. |
bannerObject |
IBanner |
– |
Banner information to display over all the calendars. |
You can interact with the component and experiment with its attributes and properties directly in this playground.
In the Code tab, the generated code snippet is available.
In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:
https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-forms-aqdatepicker--default&nav=0
<aside> ⚠️
Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.
</aside>
This section outlines the supported data types, explains and provides guidance on how to use them effectively for a robust implementation.
A comprehensive overview of the interfaces that shape the complex data types used by AqDatePicker. These definitions are crucial for proper configuration and seamless integration of the component.
Familiarity with AqDatePicker default data is essential for understanding its baseline behavior and how it responds when no custom configurations are provided.
| --- | --- | --- | --- | --- | --- |
| --- | --- | --- | --- |
| --- | --- | --- | --- |