Skip to content

Latest commit

 

History

History
86 lines (72 loc) · 2.95 KB

search-datetime-range.component.md

File metadata and controls

86 lines (72 loc) · 2.95 KB
Title Added Status Last reviewed
Search datetime range component
v4.2.0
Active
2024-04-05

Search datetime range component

Implements a search widget for the Search Filter component.

Date Range Widget

Basic usage

{
    "search": {
        "categories": [
            {
                "id": "createdDatetimeRange",
                "name": "Created Datetime (range)",
                "enabled": true,
                "component": {
                    "selector": "datetime-range",
                    "settings": {
                        "field": "cm:created"
                    }
                }
            }
        ]
    }
}

Settings

Name Type Description
field string Field to apply the query to. Required value
datetimeFormat string Datetime format. Datetime formats used by the datetime picker are date-fns instances, so you can use any datetime format supported by date-fns. Default is 'dd/MM/yyyy HH:mm'.
maxDatetime string A fixed datetime that will set the maximum searchable datetime. Default is no maximum.
hideDefaultAction boolean Show/hide the widget actions. By default is false.

Details

This component lets the user select a range between two dates and times based on the particular field. See the Search filter component for full details of how to use widgets in a search query.

Custom datetime format

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

{
    "search": {
        "categories": [
            {
                "id": "createdDateTimeRange",
                "name": "Created Datetime (range)",
                "enabled": true,
                "component": {
                    "selector": "datetime-range",
                    "settings": {
                        "field": "cm:created",
                        "datetimeFormat": "dd-MMM-yy HH:mm:ss",
                        "maxDatetime": "10-Mar-20 20:00"
                    }
                }
            }
        ]
    }
}

See also