---
alias: "fc.field.daterange"
aliases:
  - fc.field.daterange
  - daterange
category: field
module: Core
---
# fc.field.daterange

Date and time range picker with dual calendar view, locale-aware date formatting, and configurable future date restriction.

## When to Use
- Filter forms requiring a date/time range (e.g., event search, report generation)
- Workflow user actions needing date range input
- Any form where start and end date/time selection is required

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `value` | `{ from: string \| null, to: string \| null }` | No | Initial date range in ISO format (e.g., `'2024-04-18T13:50:49.030Z'`) |
| `label` | string | No | Field label (supports i18n keys) |
| `disableFuture` | boolean | Yes | When `true`, prevents selection of future dates. Default: `false` |
| `isError` | boolean | No | Marks input as invalid with red border (custom component only) |
| `helperText` | string | No | Helper text below the input field (custom component only) |
| `minDate` | string | No | Minimum selectable date (custom component only) |
| `maxDate` | string | No | Maximum selectable date (custom component only) |

## Data Binding
In workflow configuration, use `defaultValue` with `{ from: "", to: "" }` to set initial range. The component returns values in ISO 8601 string format. Properties marked with "custom component only" can only be configured when used as a registered SDK component, not through workflow contracts.

### Workflow Contract Properties
`name`, `label`, `type`, `source`, `value`, `options`, `defaultValue`, `mandatory`

## Descendants
No.

## Gotchas
- Date format adapts to the browser's preferred language: `dd/mm/yyyy` (UK/AU), `mm/dd/yyyy` (US), `yyyy/mm/dd` (CA/FR-CA).
- Time uses 24-hour format. Default start time: `00:00:00`, default end time: `23:59:59`.
- Both start and end times are required once the filter is applied.
- Navigation icons disable at January 1970 (minimum) and the month after the current month (maximum).
- Clear resets all changes; Cancel restores initial values and closes; Apply confirms and closes.

## Manifest Example
```json
{
  "userActions": [
    {
      "eventName": "ApplyDateFilter",
      "context": [
        {
          "label": "Date",
          "type": "SECONDARY",
          "modules": ["adminconsole"],
          "confirm": true
        }
      ],
      "attributes": [
        {
          "name": "daterange",
          "label": "Dates",
          "type": "daterange",
          "source": "",
          "defaultValue": { "to": "", "from": "" },
          "mandatory": false
        }
      ]
    }
  ]
}
```

When this component is used inside workflow user actions, keep the strict contract:
- Set explicit `eventName` (do not infer from `label`)
- Keep `context` and `attributes` to documented user-action fields only
- Validate module visibility with `workflow.transitions` using ALL THREE mandatory params (`module` specific name — `"all"` returns NOTHING, `flexType`, `flexVersion`)

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
