alfresco-ng2-components/docs/content-services/components/search-date-range-tabbed.component.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Search date range tabbed component	v6.2.0	Active	2023-07-10

Search date range tabbed component

Represents a tabbed date range search widget for the Search Filter component.

Basic usage

{
    "search": {
        "categories": [
            {
                "id": "createdModifiedDateRange",
                "name": "Date",
                "enabled": true,
                "component": {
                    "selector": "date-range",
                    "settings": {
                        "dateFormat": "dd-MMM-yy",
                        "maxDate": "today",
                        "field": "cm:created, cm:modified",
                        "displayedLabelsByField": {
                            "cm:created": "Created Date",
                            "cm:modified": "Modified Date"
                        }
                    }
                }
            }
        ]
    }
}

Settings

Name	Type	Description
field	string	Fields to apply the query to. Multiple, comma separated fields can be passed, to create multiple tabs per field. Required value
dateFormat	string	Date format. Dates used by the datepicker are Javascript Date objects, using date-fns for formatting, so you can use any date format supported by the library. Default is 'dd-MMM-yy (sample date - 07-Jun-23)
maxDate	string	A fixed date (in format mentioned above, default format: dd-MMM-yy) or the string "today" that will set the maximum searchable date. Default is today.
displayedLabelsByField	{ [key: string]: string }	A javascript object containing the different display labels to be used for each tab name, identified by the field for a particular tab.

Details

This component creates a tabbed layout where each tab consists of the SearchDateRange component, which allows user to create a query containing multiple date related queries in one go.

See the Search filter component for full details of how to use widgets in a search query.

Custom date format

You can set the date range picker to work with any date format your app requires. You can use any date format supported by the date-fns library in the dateFormat and in the maxDate setting:

{
    "search": {
        "categories": [
            {
                "id": "createdModifiedDateRange",
                "name": "Date",
                "enabled": true,
                "component": {
                    "selector": "date-range",
                    "settings": {
                        "dateFormat": "dd-MMM-yy",
                        "maxDate": "02-May-23",
                        "field": "cm:created, cm:modified",
                        "displayedLabelsByField": {
                            "cm:created": "Created Date",
                            "cm:modified": "Modified Date"
                        }
                    }
                }
            }
        ]
    }
}

The SearchDateRange component allows 3 different kinds of date related operations to be performed. Based on what information is provided to that component, this component will create different kinds of queries -

• Anytime - No date filters are applied on the field. This option is selected by default
• In the last - Allows to user to apply a filter to only show results from the last 'n' unit of time.
• Between - Allows the user to select a range of dates to filter the search results.

The queries generated by this filter when using the 'In the last' or 'Between' options is of the form -

<field>:[<from_date> TO <to_date>]

See also

• Search Configuration Guide
• Search Query Builder service
• Search Widget Interface
• Search check list component
• Search number range component
• Search radio component
• Search slider component
• Search text component
• Search filter tabbed component