The `ActiveDatesCard` component provides functionality to select a start and end date and time.

## Example code

```jsx?title:'MyApp.jsx'

import React, { useState } from "react";
import { ActiveDatesCard } from "@shopify/discount-app-components";

function MyApp() {
  const [startTime, setStartTime] = useState("2022-06-13T04:30:00.000Z");
  const [endTime, setEndTime] = useState("2022-06-14T03:30:00.000Z");

  return (
    <ActiveDatesCard
      startDate={{
        value: startTime,
        onChange: setStartTime,
      }}
      endDate={{
        value: endTime,
        onChange: setEndTime,
      }}
      timezoneAbbreviation="EST"
    />
  );
}

```

## Properties

|Name|Type|Description|Required|
|---|---|---|---|
|startDate|`Field<DateTime>`|The field to use for the start date picker, formatted as an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) timestamp in UTC|Yes|
|endDate|<code>Field&#x3c;DateTime&#124;null&#x3e;</code>|The field to use for the end date picker, formatted as an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) timestamp in UTC|Yes|
|timezoneAbbreviation|`string`|The timezone abbreviation for display.|Yes|
|weekStartsOn|`Weekday`|The day of the week to show as the first day in the date picker.|No|
|disabled|`boolean`|Disables all inputs.|No|