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 (
);
}
```
## Properties
|Name|Type|Description|Required|
|---|---|---|---|
|startDate|`Field`|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|Field<DateTime|null>
|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|