Skip to content

Latest commit

 

History

History
85 lines (71 loc) · 2.76 KB

search-date-range.component.md

File metadata and controls

85 lines (71 loc) · 2.76 KB
Title Added Status Last reviewed
Search date range component
v2.4.0
Active
2018-06-11

Search date range component

Implements a date range widget for the Search Filter component.

Date Range Widget

Basic usage

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

Settings

Name Type Description
field string Field to apply the query to. Required value
dateFormat string Date format. Dates used by the datepicker are Moment.js instances, so you can use any date format supported by Moment. Default is 'DD/MM/YYYY'.
maxDate string A fixed date or the string "today" that will set the maximum searchable date. Default is no maximum.

Details

This component lets the user select a range between two dates based on the particular field. 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 Moment.js in the dateFormat and in the maxDate setting:

{
    "search": {
        "categories": [
            {
                "id": "createdDateRange",
                "name": "Created Date (range)",
                "enabled": true,
                "component": {
                    "selector": "date-range",
                    "settings": {
                        "field": "cm:created",
                        "dateFormat": "DD-MMM-YY",
                        "maxDate": "02-Mar-20"
                    }
                }
            }
        ]
    }
}

See also