Site docs are currently being updated 🚧 Thank you for your patience! 🙏

WPGraphQL Logo

Date Range Picker

ACF Extended Pro
Last Upated: Thursday, Feb 1, 2024

date_range_picker

The Date Range Picker field is made available by the Advanced Custom Fields Extended PRO plugin and provides users with a Date Range Picker using an enhanced version of the Daterangepicker library.

Types Added to the Schema

To support the Date Range Picker field, an additional Object Type is added to the Schema.

  • ACFE_Date_Range (object type): Object representing a range of dates including fields for startDate and endDate.

Resolve Type

The "date_range_picker" field type resolves as "ACFE_Date_Range" in the GraphQL Schema with startDate and endDate fields.

Field Settings

Below you will find information about how various ACF field settings can impact how the field will map to the GraphQL Schema and/or modify resolution of the field when queried.

Field Configuration

<?php
add_action( 'acf/include_fields', function() {
  if ( ! function_exists( 'acf_add_local_field_group' ) ) {
      return;
  }
  acf_add_local_field_group(
    [
      {
        "key": "my_field_group_",
        "title": "My Field Group with acfe_date_range_picker",
        "show_in_graphql": 1,
        "graphql_field_name": "myFieldGroupWithAcfeDateRangePicker",
        "map_graphql_types_from_location_rules": 0,
        "graphql_types": [
          "Page"
        ],
        "fields": [
          {
            "key": "my_field_",
            "label": "My Field",
            "name": "my_field",
            "type": "acfe_date_range_picker",
            "show_in_graphql": 1,
            "graphql_field_name": "myFieldWithAcfeDateRangePicker"
          }
        ],
        "location": [
          [
            {
              "param": "post_type",
              "operator": "==",
              "value": "page"
            }
          ]
        ]
      }
    ]
  );
});

Querying the Date Range Picker field

Next
DateTimePicker