The Date Filter is a feature that employs two date pickers, enabling users to specify a date range for refining data searches. This tool is particularly valuable when dealing with datasets containing date-related information.
Users can input a start date and an end date to filter data within a specific temporal scope. For instance, in a project management system, the Date Filter can assist in identifying tasks scheduled between a designated start and end date. In an HR application, it can be used to isolate employee records within a specified employment period. This feature ensures precision in data retrieval, allowing users to focus on information relevant to a specific timeframe, streamlining analyses and enhancing efficiency in various applications.
Add Date filter
Firstly, find the Date Filter control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Date Filter field
Open the Content > Basic block and set the Title's text of this Date Filter control. For more information about Title for field control, please refer:
Set the Associated variable for this Date Filter control. When you add a new Date Filter control, a default variable will be generated automatically. You can click the Edit Button to change the name or click the Reset button to bind this Date Filter control to other existing variables.
📢 Important Note on Using the Date Filter Variable
When integrating the Date Filter Control with other data source related controls (e.g., Data Table, Collection, News, Gallery), it's crucial to understand how to effectively use the filter variable that saves your selected date range.
To apply this filter variable:
In the settings window of your chosen data source control, select a date-type field as your condition.
Set the condition to Equal instead of Between.
Choose the Date Filter variable as the value for this condition.
Why "Equal" and not "Between"? The filter variable from the Date Filter Control is uniquely designed to encompass the "Between" logic internally by utilizing the dates selected from the two date picker controls. This means that the variable already carries the start and end dates of your range, allowing for seamless integration and filtering based on the range you've specified, without the need to explicitly set a "Between" condition.
This approach ensures that your data source controls will only display items that fall within the selected date range, streamlining your data filtering process and enhancing user experience.
For more information about variable, please refer:
Then, in the Apply type section. Choose on typing or click on apply button. For more details on Apply types, refer to:
Appearance of the Date Filter field
Open the Content > Appearance block to set the appearance and layout of this Date Filter control.
Layout: Set the layout of the 2 Date Picker controls to be displayed horizontal or vertical.
Placeholder: Set the text of the placeholder for the first and second date picker controls.
Display Title: Choose display or hide the label of this control.
Vertical Align: When Title Layout is set to horizontal, you can set the vertical alignment to Top, Center or Bottom.
Title Width: Set the Width for the title in PX , %, em, rem, vw, calc.
Dynamic Display Rules: When you set a dynamic display rules, It behaves differently based on specific conditions and rules.
Validation of the Radio Filter field
Open the Content > Validation block to set the properties of this Radio filter control.
Readonly: Turn this ON will make this field control as view only status.
Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field.
Action call of the Radio filter field
Open the Content > Action block to call a pre-defined action from the drop-down list. This action will be triggered once the value of this Radio filter field is changed.
Field -Editable
Open the Style > Field - Editable block to set the styles of the field control for it's editable status.
1. Space Between: Set the space between the two date picker controls.
2. Typography: Set the typography options for the text in the Date Range.
3. Normal/Focus: Set different styles for normal state and focus state of the Date Range. Styles below are supported to be set separately for Normal and Focus state.
Color: Choose the color of the field's text.
Background Color: Set background color of the field. By default, the background color is set as transparent.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options
4. Placeholder Color: Choose the color of the placeholder text.
5. Align: Set the alignment of text inside the field control. Can be Left, Center or Right.
6. Padding: Set the Padding of the field control.
7. Field Width: Set the width of the field control in PX , %, em, rem, vw, calc.
8. Field Alignment: Set the alignment of the field control. This will only be effected when the field width is less than the outside container.
9. Error Message: Set the styles of the error message,
Typography: Set the typography options for the error message.
Color: Choose the color of the error message's text.
Field - Read Only
Open the Style > Field - Read Only block to set the styles of the field control for it's view only status.
Typography: Set the typography options for the text in the Date Picker.
Color: Choose the color of the field's text.
Background Color: Set background color of the field. By default, the background color is set as transparent.
Align: Set the alignment of text inside the field control. Can be Left, Center or Right.
Padding: Set the Padding of the field control.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Style of title
Set the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced options that are applicable to this control.