Date Range Picker — Reference

Reference · Advanced · App Connect

Date Range Picker settings and behavior. Settings include ID, Name, Theme, Highlight.

Date Range Picker

Date Range Picker settings and events. Select the component in App Structure to find these controls in Properties.

Date Range Picker Properties

Name	Description
ID	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. Default: "". Attribute: id.
Name	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. Default: "". Attribute: name.
Theme	Default: "".
Highlight	Default: "".
Start Date	Default: "". Attribute: startdate.
End Date	Default: "". Attribute: enddate.
Min Date	Default: "". Attribute: mindate.
Max Date	Default: "". Attribute: maxdate.
Format	<p>Use the following masks:</p><table border="0" colspacing="1" cellspacing="0"> <tr><td> <b>Year</b>: </td><td><b>YYYY</b> 4 digits </td><td><b>YY</b> 2 digits </td><td><b>Y</b> full year </td><td>  </td></tr> <tr><td> <b>Month</b>: </td><td><b>MMMM</b> full </td><td><b>MMM</b> short </td><td><b>MM</b> 2 digits </td><td><b>M</b> month num</td></tr> <tr><td> <b>Month Day</b>: </td><td><b>DD</b> 2 digits </td><td><b>Do</b> 1st </td><td>2nd ... 31st </td><td><b>D</b> day num </td></tr> <tr><td> <b>Week Day</b>: </td><td><b>dddd</b> long </td><td><b>ddd</b> short day</td><td><b>dd</b> 2 letter day</td><td><b>d</b> day num </td></tr> <tr><td> <b>Hour</b>: </td><td><b>HH</b> 2 digit 24h </td><td><b>H</b> 24 hour </td><td><b>hh</b> 2 digit 12h </td><td><b>h</b> 12h </td></tr> <tr><td> <b>Minute</b>: </td><td><b>mm</b> 2 digit </td><td><b>m</b> minutes </td><td><b>ss</b> 2 digit secs</td><td><b>s</b> secs </td></tr> <tr><td> </td><td><b>A</b> AM/PM </td><td><b>a</b> am/pm </td><td>  </td><td>  </td></tr> <tr><td>Localized: </td><td><b>LT</b> HH:mm </td><td><b>LTS</b> HH:mm:ss </td><td> <b>L</b> DD/MM/YYYY </td><td>  </td></tr> <tr><td> </td><td><b>LL</b> D MMMM<br> YYYY </td><td><b>LLL</b> D MMMM<br> YYYY HH:mm</td><td> <b>LLLL</b> dddd D<br> MMMM YYYY<br> HH:mm </td></tr></table> Default: "". Attribute: format.
Opens	Options: Left (left), Right, Center (center) Default: "". Attribute: opens.
Direction	Options: Left To Right, Right To Left (rtl) Default: "". Attribute: direction.
Auto Apply	Default: "". Attribute: autoapply.
Separator	Default: " - ". Attribute: separator.
Drops Up	Default: "". Attribute: dropsup.
Unlinked	Default: "". Attribute: unlinked.
Disable Weekends	Default: "". Attribute: disableweekends.
Show Week Numbers	Default: "". Attribute: showweeknumbers.
Show Dropdowns	Default: "". Attribute: showdropdowns.
Min Year	Default: "". Attribute: minyear.
Max Year	Default: "". Attribute: maxyear.

Max Span

Name	Description
Years	Default: "". Attribute: maxspan-years.
Months	Default: "". Attribute: maxspan-months.
Weeks	Default: "". Attribute: maxspan-weeks.
Days	Default: "". Attribute: maxspan-days.

Invalid Dates

Name	Description
Data Source	Default: "". Attribute: dmx-bind:invaliddates.
Start Date Field	Default: "". Attribute: invaliddates-start.
End Date Field	Default: "". Attribute: invaliddates-end.

Custom Dates

Name	Description
Data Source	Default: "". Attribute: dmx-bind:customdates.
Start Date Field	Default: "". Attribute: customdates-start.
End Date Field	Default: "". Attribute: customdates-end.
Class Field	Default: "". Attribute: customdates-class.

Time Picker

Name	Description
Time Picker	Default: false. Attribute: timepicker.

Localization

Name	Description
Week Label	Default: "W". Attribute: weeklabel.
Apply Label	Default: "Apply". Attribute: applylabel.
Cancel Label	Default: "Cancel". Attribute: cancellabel.

Dynamic attributes

Name	Description
Start Date	Choose dynamic data binding.
End Date	Choose dynamic data binding.
Min Year	Choose dynamic data binding.
Max Year	Choose dynamic data binding.
Min Date	Choose dynamic data binding.
Max Date	Choose dynamic data binding.
Max Span Years	Choose dynamic data binding.
Max Span Months	Choose dynamic data binding.
Max Span Weeks	Choose dynamic data binding.
Max Span Days	Choose dynamic data binding.

Dynamic events

Name	Description
Show	Action: Choose the action to execute. Output value representing the shown state. This is typically used for App Connect state binding and logic, not for styling. Bootstrap docs: JavaScript
Hide	Action: Choose the action to execute. Output value representing the hidden state. This is typically used for App Connect state binding and logic. Bootstrap docs: JavaScript
Apply	Action: Choose the action to execute.
Cancel	Action: Choose the action to execute.