Date Range Picker: Reference
Reference for Date Range Picker in Web Framework References. Key properties: ID, Name, Theme, Highlight.
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 Range 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 |
| Theme | droplist | |
| Highlight | droplist | |
| Start Date | date | Attribute: startdate |
| End Date | date | Attribute: enddate |
Max Span
| Property | Type | Details |
|---|---|---|
| Years | number | Attribute: maxspan-years |
| Months | number | Attribute: maxspan-months |
| Weeks | number | Attribute: maxspan-weeks |
| Days | number | Attribute: maxspan-days |
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. |
Time Picker
| Property | Type | Details |
|---|---|---|
| Time Picker | boolean | Attribute: timepicker |
Localization
| Property | Type | Details |
|---|---|---|
| Week Label | text | Attribute: weeklabel |
| Apply Label | text | Attribute: applylabel |
| Cancel Label | text | Attribute: cancellabel |
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. |