Question

Searchkit中的DynamicRangeFilter是一种很好的解决方案，例如过滤年份。您只需在Elasticsearch中保存年份字段并使用过滤器：

<DynamicRangeFilter
    field="year"
    id="year"
    title="Year"
/>

到目前为止，我还没有发现如何将其用于过滤多值属性，例如几年。假设您有一个start和end的duration属性：

[
  {
    "id": 123,
    "title": "Foo",
    "duration": {
      "start": 2013,
      "end": 2016
    }
  },
  {
    "id": 234,
    "title": "Bar",
    "duration": {
      "start": 2015,
      "end": 2015
    }
  },
  {
    "id": 345,
    "title": "Baz",
    "duration": {
      "start": 2017,
      "end": 2020
    }
  }
]

现在，过滤器应遵守持续时间并显示范围内的所有项目。我不确定是否可以以及如何使用fieldOptions来实现这一目标。

Answer 1

如果将日期过滤器组件用于Searchkit，则可以实现以下目的：

用于Searchkit的日历样式的日期过滤器组件

此Searchkit过滤器使用户可以根据以下条件过滤开始和结束日期范围   选择的开始时间和可选的结束时间。

有关工作示例，请参见 demo directory 。



日期范围过滤所需的Searchkit组件是   最初在MIT许可下发布的 here 。

安装
npm install --save-dev searchkit-datefilter
示例
import { SearchkitComponent } from "searchkit";
import { DateRangeFilter, DateRangeCalendar } from "searchkit-datefilter"

class App extends SearchkitComponent
{
    render()
    {
        <div>
            <DateRangeFilter
                id="event_date"
                title="Date range"
                fromDateField="event_date.from"
                toDateField="event_date.to"
                calendarComponent={DateRangeCalendar}
                fieldOptions={{
                    type: 'embedded',
                    options: {
                        path: 'event_date'
                    }
                }}
            />
        </div>
    }
}
属性


fromDateField （ESField）：必需。用作起点的Elasticsearch日期字段。

toDateField （ESField）：必需。用作结尾的elasticsearch日期字段。

id （字符串）：必需。组件的ID。必须是唯一的。用作网址序列化的键

title （字符串）：必需。用于组件和所选过滤器组件的标题


calendarComponent（ReactComponent）：呈现时要使用的日历组件


兼容DateRangeCalendar

默认为DateRangeFilterInput，仅显示两个日期数学输入字段




fieldOptions （{type：“ embedded | nested | children”，options：Object}）配置存储在ElasticSearch中的type字段，可以是   嵌入式，嵌套或子级


type：nested需要提供options.path

type：children需要options.childType提供

请参阅Searchkit文档中的Field Options




rangeFormatter （（count：number）=>字符串|数字）一种格式化程序函数，用于将数字转换为更易读的显示值。   例如。长号格式或前缀货币。




您可以在日期过滤器代码存储库中找到完整的描述： here 和 here 。

上面代码部分的完整示例，您可以找到 here 。

我希望它能对您有所帮助。祝你好运！

如何为多值属性添加动态范围过滤器？

1 个答案: