Date Filter widget

The Date Filter widget allows you to filter features by choosing a specific date or date range with a calendar tool.

You can use the Date Filter widget to filter layers that have at least one valid date field or date only field.

Examples

Use this widget to support app design requirements such as the following:

• You have date-related data where each record is associated with a specific date and you want to filter a Table widget or List widget to only show features from a chosen date.
• You have a list of events that all take place over multiple days and you want to choose a date and see which events occur on that date.
• You have a web map with layers that include date fields and you want to apply a filter and see data for your chosen date or date range.

Usage notes

This widget requires connection to a data source with at least one attribute field containing date information. The connected data source must have fields of the following field types:

• Date
• Date only

In the widget's settings, you can allow users to select a single date or a range of dates. In the single date selection mode, the widget includes a Today button that returns the calendar to the current month. Click a day in the calendar to select a single date. Click a start day and end day to select a range of dates.

When you include this widget in an app, the widget provides users with a calendar-based date picker tool. You can choose from three different user interface styles in the widget's settings:

• Inline—The widget is a panel that contains the calendar tool.
• Icon—The widget is a button. Clicking the button opens a window with the calendar tool. You can change the button icon by changing the icon at the top of the Date Filter widget settings panel.
• Input—The widget is one or two text boxes. You can type to enter dates or click each text box to choose dates with the calendar tool. This style does not support the Today button.

Settings

The Date Filter widget includes the following settings:

• Source—Connect the widget to data in one of the following ways:
  • Select layers—Connect individual layers to the widget. Click Select data to open the Select data panel. Here you can choose from supported layers with at least one date field that you have already added to the app, or you can add new data. Layers you connect to the widget appear in a list in the widget settings panel under Source. Click a layer to open its settings panel, where you can configure the following settings:
    • Data—The connected data source displays here.
    • Fields—Specify which fields to use for the Start date and, optionally, the End date.

      Note:

      For each layer, you must specify a start date field. If your data includes fields for start dates and end dates, you can also specify an end date field. Together, start and end dates indicate that a feature exists for a certain duration of time, meaning the feature displays in filter results for any days within that duration.

      Note:

      The start and end date fields automatically populate for layers with one date field and for time-aware layers with multiple date fields. You must manually specify start and end date fields for data that is non-time-aware layers with multiple date fields.

  • Interact with a Map widget—Connect the Date Filter widget to a Map widget. The Map widget must contain at least one web map or web scene with layers with valid date fields. The Date Filter widget connects automatically to the first Map widget on the current page.
    • Any web maps or web scenes in the connected Map widget appear in a list. You can click each web map or scene to open its configuration panel, where you can turn on Customize layers.
      • Customize layers—All supported layers with valid date fields in the connected map or scene automatically sync to the Date Filter widget. If you turn on this setting, those layers appear in a list and you can choose which layers to connect to the widget.
      • Any layers that you turn on under Customize layers appear in a drop-down menu under the associated map or scene. Click a layer to open its settings panel, where you can configure the following settings:
        • Data—The name of the connected layer displays here.
        • Fields—Specify which fields to use for the Start date and, optionally, the End date.
• Styles—Choose a user interface style for the widget, either Inline, Icon, or Input.
• Options—Configure the following tools and capabilities:
  • Date selection mode—Choose whether users can select single dates or ranges of dates.
  • Default date—Optionally, enter a default date (for single dates) or a default start and end date (for a date ranges). You can define default dates in the following ways:
    • Empty—Do not set a default date.
    • Today—Anchor the default date to the current date when the user accesses the app.
    • Yesterday—Anchor the default date to the day before the current date.
    • Tomorrow—Anchor the default date to the day after the current date.
    • Custom—Choose a specific date from a calendar tool.
  • Auto apply filter—Automatically apply the date filter when the user selects a date or date range, instead of requiring the user to click the Apply button. If you turn on this setting and provide a default date, the default filter applies when the widget first loads.

    Note:

    The Auto apply filter setting is always turned on when you choose the Input style.