|
| 1 | +# Date & Date Range |
| 2 | + |
| 3 | +## 📅 Date & Date Range Components in Lowcoder |
| 4 | + |
| 5 | +Lowcoder offers intuitive and customisable components for date selection, enabling users to seamlessly incorporate date inputs into their applications. |
| 6 | + |
| 7 | +### 📆 Date Component |
| 8 | + |
| 9 | +The **Date** component allows users to select a single date from a calendar interface. |
| 10 | + |
| 11 | +#### 🔧 Key Features |
| 12 | + |
| 13 | +* _**User-Friendly Interface**_**:** Provides a calendar pop-up for easy date selectin. |
| 14 | +* _**Customizable Format**_**:** Supports various date formats to match application requiremens. |
| 15 | +* _**Data Binding**_**:** Easily bind the selected date to other components or queries within the ap. |
| 16 | +* _**Event Handling**_**:** Trigger actions based on user interactions, such as date selection changs. |
| 17 | + |
| 18 | +#### 🛠 Configuration Options |
| 19 | + |
| 20 | +* _**Default Date**_**:** Set an initial date vaue. |
| 21 | +* _**Minimum and Maximum Dates**_**:** Restrict selectable dates within a specific rage. |
| 22 | +* _**Disabled Dates**_**:** Specify dates that should be unselectale. |
| 23 | +* _**Placeholder Text**_**:** Provide guidance when no date is seleced. |
| 24 | + |
| 25 | +#### ⚙️ Integration Tips |
| 26 | + |
| 27 | +* _**Formatting**_**:** Utilize Day.js, which is integrated into Lowcoder, for date formatting and manipulation. For examle: |
| 28 | + |
| 29 | + ```javascript |
| 30 | + {{ dayjs(date1.value).format('YYYY-MM-DD') }} |
| 31 | + ``` |
| 32 | +* _**Event Handling**_**:** Use event handlers to perform actions when the date value chanes. |
| 33 | + |
| 34 | +#### Components Playground |
| 35 | + |
| 36 | +On Component Playground, you can interact with the Date component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Date component. |
| 37 | +
|
| 38 | +{% embed url="https://app.lowcoder.cloud/playground/date/1" %} |
| 39 | +
|
| 40 | +#### Components Auto-Docs |
| 41 | +
|
| 42 | +In the Auto-Docs of Date component, we have shown how to use different properties of the Date component. It also includes the Styling properties of the Date component. |
| 43 | +
|
| 44 | +{% embed url="https://app.lowcoder.cloud/components/date" %} |
| 45 | +
|
| 46 | +### 📅📅 Date Range Component |
| 47 | +
|
| 48 | +The **Date Range** component enables users to select a start and end date, facilitating the selection of a date interval. |
| 49 | +
|
| 50 | +#### 🔧 Key Features |
| 51 | +
|
| 52 | +* **Dual Date Selection**: Allows selection of both start and end dates. |
| 53 | +* **Preset Ranges**: Optionally provide quick selection options like "Last 7 Days" or "This month". |
| 54 | +* **Data Binding**: Bind the selected date range to other components or queries. |
| 55 | +* **Event Handling**: Trigger actions based on changes to the selected date range. |
| 56 | +
|
| 57 | +#### 🛠 Configuration Options |
| 58 | +
|
| 59 | +* **Default Range**: Set initial start and end dates. |
| 60 | +* **Minimum and Maximum Dates**: Define the allowable range for selection. |
| 61 | +* **Disabled Dates**: Specify dates that should be unselectable within the range. |
| 62 | +* **Separator**: Customize the separator between start and end dates in the display. |
| 63 | +
|
| 64 | +#### ⚙️ Integration Tips |
| 65 | +
|
| 66 | +* **Formating**: Use Day.js for formatting both start and end dates. For example: |
| 67 | +
|
| 68 | + ```javascript |
| 69 | + {{ dayjs(dateRange1.value[0]).format('YYYY-MM-DD') }} to {{ dayjs(dateRange1.value[1]).format('YYYY-MM-DD') }} |
| 70 | + ``` |
| 71 | +* **Event Handing**: Implement event handlers to respond to changes in the selected date range. |
| 72 | +
|
| 73 | +#### Components Playground |
| 74 | +
|
| 75 | +On Component Playground, you can interact with the Date Range component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Date Range component. |
| 76 | + |
| 77 | +{% embed url="https://app.lowcoder.cloud/playground/dateRange/1" %} |
| 78 | + |
| 79 | +#### Components Auto-Docs |
| 80 | + |
| 81 | +In the Auto-Docs of Date Range component, we have shown how to use different properties of the Date Range component. It also includes the Styling properties of the Date Range component. |
| 82 | + |
| 83 | +{% embed url="https://app.lowcoder.cloud/components/dateRange" %} |
| 84 | + |
| 85 | +### 🔗 Additional Resources |
| 86 | + |
| 87 | +* **Day.js Documentation**: For advanced date manipulation and formatting, refer to the [Day.js Documentation](https://day.js.org/docs/en/get-et/get). |
| 88 | + |
| 89 | +### Properties of the Date & Date Range Components |
| 90 | + |
| 91 | +These properties are accessible in \{{ \}} notations, as well as in JavaScript Queries.  |
| 92 | + |
| 93 | +<table><thead><tr><th width="178.92578125">Property Name</th><th width="144.2265625">Type</th><th>Description</th></tr></thead><tbody><tr><td>value</td><td>String</td><td>Returns the String containing Date value of the Date component</td></tr><tr><td>hidden</td><td>Boolean</td><td>Returns True or False based on whether the component is hidden or not</td></tr><tr><td>disabled</td><td>Boolean</td><td>Returns True or False based on whether the component is disabled or not</td></tr><tr><td>invalid</td><td>Boolean</td><td>Returns True or False based on whether the component is valid or not</td></tr><tr><td>formattedValue</td><td>String</td><td>Returns the String containing Full Date value ( Date + Time + Time Zone offset ) of the Component</td></tr><tr><td>timestamp</td><td>String</td><td>Returns the Timestamp value of the Date component</td></tr><tr><td>timeZone</td><td>Object</td><td>Returns TimeZone object, which contains the Name, Offset and TimeZone properties for the Component</td></tr><tr><td>start</td><td>String</td><td>Returns the String containing the Start Date value of the Date Range component</td></tr><tr><td>end</td><td>String</td><td>Returns the String containing the End Date value of the Date Range component</td></tr><tr><td>startTimestamp</td><td>String</td><td>Returns the String containing the Start Timestamp value of the Date Range component</td></tr><tr><td>endTimestamp</td><td>String</td><td>Returns the String containing the End Timestamp value of the Date Range component</td></tr><tr><td>formattedStartValue</td><td>String</td><td>Returns the String containing Full Start Date value ( Date + Time + Time Zone offset ) of the Date Range Component</td></tr><tr><td>formattedEndValue</td><td>String</td><td>Returns the String containing Full End Date value ( Date + Time + Time Zone offset ) of the Date Range Component</td></tr></tbody></table> |
| 94 | + |
| 95 | +#### Events <a href="#events" id="events"></a> |
| 96 | + |
| 97 | +Events give you the ability to trigger further actions (with Event-Handlers). |
| 98 | + |
| 99 | +<table><thead><tr><th width="175.01953125">Event Name</th><th width="442.3671875">Description</th></tr></thead><tbody><tr><td>Change</td><td>Triggers, when a User make any"changes" to the Component</td></tr><tr><td>Focus</td><td>Triggers, when a User "Clicks" on the Component</td></tr><tr><td>Blur</td><td>Triggers, when a User Clicks outside of the Component i.e, defocuses the component.</td></tr></tbody></table> |
| 100 | + |
| 101 | +#### Methods <a href="#methods" id="methods"></a> |
| 102 | + |
| 103 | +You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events. |
| 104 | + |
| 105 | +**setValue():**  |
| 106 | + |
| 107 | +date1.setValue() method sets the Date's Value property, which gets selected in the Date component. |
| 108 | +
|
| 109 | +```javascript |
| 110 | +date1.setValue("2026-05-05"); |
| 111 | +``` |
| 112 | +
|
| 113 | +**clearValue() :**  |
| 114 | +
|
| 115 | +date1.clearValue() clears the Date's Value property and empties the selected value from the Date component. |
| 116 | + |
| 117 | +```javascript |
| 118 | +date1.clearValue(); |
| 119 | +``` |
| 120 | + |
| 121 | +**resetValue() :**  |
| 122 | + |
| 123 | +date1.resetValue() method resets the Date's value property to the default value of the Date component. |
| 124 | +
|
| 125 | +```javascript |
| 126 | +date1.resetValue(); |
| 127 | +``` |
| 128 | +
|
| 129 | +**setDefaultValue():**  |
| 130 | +
|
| 131 | +date1.setDefaultValue() method sets the Date's DefaultValue property, which gets selected as default in the Date component. |
| 132 | + |
| 133 | +```javascript |
| 134 | +date1.setDefaultValue("2026-05-05"); |
| 135 | +``` |
| 136 | + |
| 137 | +**clearDefaultValue() :**  |
| 138 | + |
| 139 | +date1.clearDefaultValue() clears the Date's DefaultValue property and empties the default value from the Date component. |
| 140 | +
|
| 141 | +```javascript |
| 142 | +date1.clearDefaultValue(); |
| 143 | +``` |
| 144 | +
|
| 145 | +**resetDefaultValue() :**  |
| 146 | +
|
| 147 | +date1.resetDefaultValue() method resets the Date's Default value property to the default value of the Date component. |
| 148 | + |
| 149 | +```javascript |
| 150 | +date1.resetDefaultValue(); |
| 151 | +``` |
| 152 | + |
| 153 | +**setUserTimeZone() :**  |
| 154 | + |
| 155 | +date1.setUserTimeZone() method sets the Date's TimeZone object property, which sets the TimeZone of the Date component. |
| 156 | +
|
| 157 | +```javascript |
| 158 | +date1.setUserTimeZone({ |
| 159 | + Name: "GMT+5", |
| 160 | + Offset: "+05:00", |
| 161 | + TimeZone: "Asia/Karachi", |
| 162 | +}); |
| 163 | +``` |
| 164 | +
|
| 165 | +**clearUserTimeZone() :** |
| 166 | +
|
| 167 | +date1.clearUserTimeZone() clears the Date's TimeZone object property and empties the selected/current value of the TimeZone property from the Date component. |
| 168 | + |
| 169 | +```javascript |
| 170 | +date1.clearUserTimeZone(); |
| 171 | +``` |
| 172 | + |
| 173 | +**resetUserTimeZone() :** |
| 174 | + |
| 175 | +date1.resetUserTimeZone() method resets the Date's TimeZone object property to the default value of the TimeZone property of the Date component. |
| 176 | +
|
| 177 | +```javascript |
| 178 | +date1.resetUserTimeZone(); |
| 179 | +``` |
| 180 | +
|
| 181 | +**setStart() :**  |
| 182 | +
|
| 183 | +dateRange1.setStart() method sets the Date Range's Start Value property, which sets the Start date of the Date Range component. |
| 184 | + |
| 185 | +```javascript |
| 186 | +dateRange1.setStart("2025-01-01"); |
| 187 | +``` |
| 188 | + |
| 189 | +**clearStart() :** |
| 190 | + |
| 191 | +dateRange1.clearStart() clears the Date Range's Start Value property and empties the Start Date value from the Date Range component. |
| 192 | +
|
| 193 | +```javascript |
| 194 | +dateRange1.clearStart(); |
| 195 | +``` |
| 196 | +
|
| 197 | +**resetStart() :**  |
| 198 | +
|
| 199 | +dateRange1.resetStart() method resets the Date Range's Start value property to the default Start value of the Date Range component. |
| 200 | + |
| 201 | +```javascript |
| 202 | +dateRange1.resetStart(); |
| 203 | +``` |
| 204 | + |
| 205 | +**setEnd() :**  |
| 206 | + |
| 207 | +dateRange1.setEnd() method sets the Date Range's End Value property, which sets the End date of the Date Range component. |
| 208 | +
|
| 209 | +```javascript |
| 210 | +dateRange1.setEnd("2025-01-01"); |
| 211 | +``` |
| 212 | +
|
| 213 | +**clearEnd() :** |
| 214 | +
|
| 215 | +dateRange1.clearEnd() clears the Date Range's End Value property and empties the End Date value from the Date Range component. |
| 216 | + |
| 217 | +```javascript |
| 218 | +dateRange1.clearEnd(); |
| 219 | +``` |
| 220 | + |
| 221 | +**resetEnd() :**  |
| 222 | + |
| 223 | +dateRange1.resetEnd() method resets the Date Range's End value property to the default End value of the Date Range component. |
| 224 | +
|
| 225 | +```javascript |
| 226 | +dateRange1.resetEnd(); |
| 227 | +``` |
| 228 | +
|
| 229 | +**setRange() :**  |
| 230 | +
|
| 231 | +dateRange1.setRange() method sets the Range of the Date Range component, i.e, it sets the Start and End dates of the Date Range component. |
| 232 | +
|
| 233 | +```javascript |
| 234 | +dateRange1.setRange("2025-01-01","2025-12-31"); |
| 235 | +``` |
| 236 | +
|
| 237 | +**setDefaultStart() :**  |
| 238 | +
|
| 239 | +dateRange1.setDefaultStart() method sets the Date Range's DefaultStart Value property, which sets the Default Start date of the Date Range component. |
| 240 | + |
| 241 | +```javascript |
| 242 | +dateRange1.setDefaultStart("2025-01-01"); |
| 243 | +``` |
| 244 | + |
| 245 | +**clearDefaultStart() :** |
| 246 | + |
| 247 | +dateRange1.clearDefaultStart() clears the Date Range's DefaultStart Value property and empties the Default Start Date value from the Date Range component. |
| 248 | +
|
| 249 | +```javascript |
| 250 | +dateRange1.clearDefaultStart(); |
| 251 | +``` |
| 252 | +
|
| 253 | +**resetDefaultStart() :**  |
| 254 | +
|
| 255 | +dateRange1.resetDefaultStart() method resets the Date Range's DefaultStart value property to the default Start value of the Date Range component. |
| 256 | + |
| 257 | +```javascript |
| 258 | +dateRange1.resetDefaultStart(); |
| 259 | +``` |
| 260 | + |
| 261 | +**setDefaultEnd() :**  |
| 262 | + |
| 263 | +dateRange1.setDefaultEnd() method sets the Date Range's DefaultEnd Value property, which sets the Default End date of the Date Range component. |
| 264 | +
|
| 265 | +```javascript |
| 266 | +dateRange1.setDefaultEnd("2025-01-01"); |
| 267 | +``` |
| 268 | +
|
| 269 | +**clearDefaultEnd() :** |
| 270 | +
|
| 271 | +dateRange1.clearDefaultEnd() clears the Date Range's DefaultEnd Value property and empties the Default End Date value from the Date Range component. |
| 272 | + |
| 273 | +```javascript |
| 274 | +dateRange1.clearDefaultEnd(); |
| 275 | +``` |
| 276 | + |
| 277 | +**resetDefaultEnd() :**  |
| 278 | + |
| 279 | +dateRange1.resetDefaultEnd() method resets the Date Range's DefaultEnd value property to the default End value of the Date Range component. |
| 280 | +
|
| 281 | +```javascript |
| 282 | +dateRange1.resetDefaultEnd(); |
| 283 | +``` |
| 284 | +
|
| 285 | +**clearAll() :** |
| 286 | +
|
| 287 | +dateRange1.clearAll() clears all the Properties of the Date Range component. |
| 288 | +
|
| 289 | +```javascript |
| 290 | +dateRange1.clearAll(); |
| 291 | +``` |
| 292 | +
|
| 293 | +**resetAll() :** |
| 294 | +
|
| 295 | +dateRange1.resetAll() reset all the Properties of the Date Range component. |
| 296 | +
|
| 297 | +```javascript |
| 298 | +dateRange1.resetAll(); |
| 299 | +``` |
| 300 | +
|
| 301 | +**setUserRangeTimeZone() :**  |
| 302 | +
|
| 303 | +date1.setUserRangeTimeZone() method sets the Date Range's TimeZone object property, which sets the TimeZone of the Date Range component. |
| 304 | + |
| 305 | +```javascript |
| 306 | +dateRange1.setUserRangeTimeZone({ |
| 307 | + Name: "GMT+5", |
| 308 | + Offset: "+05:00", |
| 309 | + TimeZone: "Asia/Karachi", |
| 310 | +}); |
| 311 | +``` |
| 312 | + |
| 313 | +**clearUserRangeTimeZone() :** |
| 314 | + |
| 315 | +date1.clearUserRangeTimeZone() clears the Date Range's TimeZone object property and empties the selected/current value of the TimeZone property from the Date Range component. |
| 316 | +
|
| 317 | +```javascript |
| 318 | +dateRange1.clearUserRangeTimeZone(); |
| 319 | +``` |
| 320 | +
|
| 321 | +**resetUserRangeTimeZone() :** |
| 322 | +
|
| 323 | +date1.resetUserRangeTimeZone() method resets the Date's TimeZone object property to the default value of the TimeZone property of the Date Range component. |
| 324 | + |
| 325 | +```javascript |
| 326 | +dateRange1.resetUserRangeTimeZone(); |
| 327 | +``` |
0 commit comments