Date Picker: Reference
Reference for Date Picker in Web Framework References. Key properties: ID, Name, Static Value, Theme.
The most advanced date/date range picker with time picker. When creating advanced booking forms you need full control of the date and time selection, ranges and validation. With App Connect Date Picker 2 you can allow the user to pick from single date to a full range, complying to your wishes.
Inspector Property Groups
Date Picker Properties
| Property | Type | Details |
|---|---|---|
| ID | text | Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Required in common setups. Attribute: id |
| Name | text | HTML name attribute. Sets the control name . This is used as the field key in form submissions and is essential for classic post submissions and many server-side handlers. Bootstrap docs: Forms overview Required in common setups. Attribute: name |
| Static Value | date | Initial/default value. Sets the control initial value. For App Connect, you often bind values reactively instead of hardcoding them. Bootstrap docs: Form control Attribute: value |
| Theme | droplist | |
| Highlight | droplist | |
| Min Date | date | Attribute: mindate |
Time Picker
| Property | Type | Details |
|---|---|---|
| Time Picker | boolean | Attribute: timepicker |
Invalid Dates
| Property | Type | Details |
|---|---|---|
| Data Source | text | Attribute: dmx-bind:invaliddates Supports dynamic option sources. |
| Start Date Field | text | Attribute: invaliddates-start Supports dynamic option sources. |
| End Date Field | text | Attribute: invaliddates-end Supports dynamic option sources. |
Custom Dates
| Property | Type | Details |
|---|---|---|
| Data Source | text | Attribute: dmx-bind:customdates Supports dynamic option sources. |
| Start Date Field | text | Attribute: customdates-start Supports dynamic option sources. |
| End Date Field | text | Attribute: customdates-end Supports dynamic option sources. |
| Class Field | text | Attribute: customdates-class Supports dynamic option sources. |
| Use Custom Dates Only | boolean | Attribute: customonly |
Localization
| Property | Type | Details |
|---|---|---|
| Week Label | text | Attribute: weeklabel |
| Apply Label | text | Attribute: applylabel |
| Cancel Label | text | Attribute: cancellabel |
Actions
Set Value
Set Value of the input
| Configuration group | Controls |
|---|---|
| Set Value Properties | Value |
Disable
Disable of the input
| Configuration group | Controls |
|---|---|
| Disable Properties | Value |
Validate
Validate the input
Focus
Focus the input
Dynamic Attributes
Start Date
| Attribute property | Type | Details |
|---|---|---|
| Value: | text | Choose dynamic data binding. |
End Date
| Attribute property | Type | Details |
|---|---|---|
| Value: | text | Choose dynamic data binding. |
Min Year
| Attribute property | Type | Details |
|---|---|---|
| Value: | text | Choose dynamic data binding. |
Max Year
| Attribute property | Type | Details |
|---|---|---|
| Value: | text | Choose dynamic data binding. |
Min Date
| Attribute property | Type | Details |
|---|---|---|
| Value: | text | Choose dynamic data binding. |
Dynamic Events
Show
| Event option | Type | Details |
|---|---|---|
| Action: | text | Choose the action to execute. |
Hide
| Event option | Type | Details |
|---|---|---|
| Action: | text | Choose the action to execute. |
Apply
| Event option | Type | Details |
|---|---|---|
| Action: | text | Choose the action to execute. |
Cancel
| Event option | Type | Details |
|---|---|---|
| Action: | text | Choose the action to execute. |