Date Range Picker
The Range Picker component enables users to select a range of dates. It can be used in booking platforms, report filtering, scheduling systems, etc.
Properties​
| Property | Description | Expected Value |
|---|---|---|
| Label | Text to display as the label for the field. | String (e.g., Select Check-In and Check-Out Dates). |
| Placeholder | Text shown in the field when no date range is selected. Default value is Select Date Range. | String (e.g., Select check-in and check-out dates). |
| Default start date | Set the start date to be selected by default in the component. | Date in correct format (e.g., 01/04/2024). |
| Default end date | Set the end date to be selected by default in the component. | Date in correct format (e.g., 10/04/2024). |
| Format | Defines the date format. Default date format is DD/MM/YYYY. | A Moment.js format string (e.g., MM/DD/YYYY). |
caution
Click the fx button next to Format to enter a custom format string. ToolJet uses Moment.js to parse and format dates, so the format string must use Moment.js tokens, and these tokens are case-sensitive — for example, D is the day of the month (1–31), while lowercase d is the day of the week (0–6, Sunday to Saturday). Also note that YYYY gives a 4-digit year, but lowercase yyyy isn't a valid Moment.js token and gets rendered as literal text. Use a format like MMM D, YYYY (e.g., Jan 5, 2024), not MMM d, yyyy.
Events​
| Event | Description |
|---|---|
| On select | Triggers whenever a start date or end date is selected. |
| On focus | Triggers whenever the user clicks inside the input field. |
| On blur | Triggers whenever the user clicks outside the input field. |
info
Check Action Reference docs to get the detailed information about all the Actions.
Component Specific Actions (CSA)​
Following actions of component can be controlled using the Component Specific Actions (CSAs), which can be triggered using an event or by using the given RunJS query:
Action | Description | How To Access |
|---|---|---|
| setStartDate( ) | Sets the start date of the selected date range. An optional second argument sets the format to parse the date with. | components.daterangepicker1.setStartDate(date, format) |
| clearStartDate( ) | Clears the selected start date. | components.daterangepicker1.clearStartDate() |
| setEndDate( ) | Sets the end date of the selected date range. An optional second argument sets the format. | components.daterangepicker1.setEndDate(date, format) |
| clearEndDate( ) | Clears the selected end date. | components.daterangepicker1.clearEndDate() |
| setDateRange( ) | Sets both the start and end dates of the selected date range. An optional third argument sets the format. | components.daterangepicker1.setDateRange(startDate, endDate, format) |
| clearDateRange( ) | Clears both the start and end dates. | components.daterangepicker1.clearDateRange() |
| setDisabledDates( ) | Sets specific dates as disabled, preventing selection. | components.daterangepicker1.setDisabledDates([date1, date2]) |
| clearDisabledDates( ) | Clears all disabled date restrictions. | components.daterangepicker1.clearDisabledDates() |
| setMinDate( ) | Sets the minimum selectable date. | components.daterangepicker1.setMinDate(date) |
| setMaxDate( ) | Sets the maximum selectable date. | components.daterangepicker1.setMaxDate(date) |
| setFocus( ) | Sets the focus of the cursor on the input field. | components.daterangepicker1.setFocus() |
| setBlur( ) | Removes the focus of the cursor from the input field. | components.daterangepicker1.setBlur() |
| setVisibility() | Sets the visibility of the component. | components.daterangepicker1.setVisibility(true) |
| setLoading() | Sets the loading state of the component. | components.daterangepicker1.setLoading(true) |
| setDisable() | Disables the component. | components.daterangepicker1.setDisable(true) |
Exposed Variables​
Following exposed variables can be dynamically accessed using the given JS query:
| Variables | Description | How To Access |
|---|---|---|
| endDate | Holds the date selected as the end date in the component. | {{components.daterangepicker1.endDate}} |
| startDate | Holds the date selected as the start date in the component. | {{components.daterangepicker1.startDate}} |
| label | Holds the value of the component's label. | {{components.daterangepicker1.label}} |
| minDate | Holds the value of the minimum date allowed in the component. | {{components.daterangepicker1.minDate}} |
| maxDate | Holds the value of the maximum date allowed in the component. | {{components.daterangepicker1.maxDate}} |
| selectedDateRange | Holds the value of the component's date range. | {{components.daterangepicker1.selectedDateRange}} |
| startDateInUnix | Holds the start date as a Unix timestamp in milliseconds. | {{components.daterangepicker1.startDateInUnix}} |
| endDateInUnix | Holds the end date as a Unix timestamp in milliseconds. | {{components.daterangepicker1.endDateInUnix}} |
| dateFormat | Defines the format in which the selected date range is displayed. | {{components.daterangepicker1.dateFormat}} |
| isValid | Indicates if the selected date range meets validation criteria. | {{components.daterangepicker1.isValid}} |
| isMandatory | Indicates if the field is required. | {{components.daterangepicker1.isMandatory}} |
| isLoading | Indicates if the component is loading. | {{components.daterangepicker1.isLoading}} |
| isVisible | Indicates if the component is visible. | {{components.daterangepicker1.isVisible}} |
| isDisabled | Indicates if the component is disabled. | {{components.daterangepicker1.isDisabled}} |
Validation​
Validation Option | Description | Expected Value |
|---|---|---|
| Min Date | Sets the minimum date allowed. | Date in correct format (e.g. 01/01/2020). |
| Max Date | Sets the maximum date allowed. | Date in correct format (e.g. 31/12/2026). |
| Disabled dates | Sets the dates that can't be part of the range. If the selected range includes one of them, the error Selected date range is excluded is shown. | An array of dates in the Format (e.g. {{['23/07/2024', '24/07/2024']}}). |
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression |
| Make this field mandatory | Displays an 'Input is mandatory' message if no date range is selected. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
To add regex inside Custom Validation, you can use the below format:
Format: {{(<regexPattern>.test(<value>)) ? '' : 'Error message'}}
Example:
{{ /^\d{4}-\d{2}-\d{2}$/.test(components.daterangepicker1.startDate) && /^\d{4}-\d{2}-\d{2}$/.test(components.daterangepicker1.endDate) ? '' : 'Please enter a valid date in YYYY-MM-DD format' }}
startDate and endDate use the Format property, so this example works only when Format is set to YYYY-MM-DD.
Additional Actions​
Action | Description | Configuration Options |
|---|---|---|
| Enable clear button | Shows a clear button inside the field while it has a value. Clicking it clears the value. The button is hidden while the component is disabled or loading. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Loading state | Enables a loading spinner, often used with isLoading to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Collapse when hidden | Collapses the component's space when it is hidden, so surrounding components fill the space. Takes effect when the app runs (preview or released app), not on the editor canvas. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Tooltip | Provides additional information on hover. Supports Plain text, Markdown, and HTML formats. | String (e.g., Select your booking dates. ). |
Devices​
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles​
Label​
| Property | Description |
|---|---|
| Label Color | Sets the color of the label text. |
| Size | Sets the font size of the label, in pixels. Defaults to 12. Enter a number or click on fx and enter code that returns a number. |
| Alignment | Determines the label's position, choose between top/side and left/right alignment. |
| Direction | When alignment is set to side, places the label to the left or right of the field. Select Left or Right using the icon toggles. |
| Width | Specifies the percentage of the component’s width that the label should occupy. |
Color​
| Property | Description |
|---|---|
| Background | Sets the background color of the component. |
| Border | Defines the color of the component’s border. |
| Accent | Specifies the accent color used for highlights or focus indicators. |
| Text | Sets the text color inside the component. |
| Error text | Color applied to error messages. |
Input Field​
| Property | Description |
|---|---|
| Icon | Adds an icon to the component, usually for visual cues or actions. |
| Icon Color | Sets the color of the icon. |
| Icon Position | Defines the position of the icon (e.g., left, right). |
| Border radius | Controls the roundness of the component's input field. |
| Box shadow | Applies shadow styling to the input field. |
| Padding | Sets the internal spacing between the content and the input field edges. |
Advanced​
Property | Description | Configuration Options |
|---|---|---|
| CSS class | Adds a custom CSS class to the component, which can be targeted using Custom Styles for advanced styling. | Enter one or more class names. |
info
The Advanced section is available only if your plan has the Custom Styles feature enabled.
info
Any property having fx button next to its field can be programmatically configured.