> ## Documentation Index
> Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Date Selector Card

### Intro

Date Selector Cards display a calendar-style range of dates. When you add them to a Domo dashboard, dashboard viewers can select a range of dates from the calendar as a filter. Alternatively, they can choose from several preset date filters such as **Last year** and **Last 2 months**. The date filter you choose is applied to all other cards on the dashboard. Date Selector Cards have a 25,000-row limit.

For example, if you select all dates from April 1st – July 31st on the calendar, all other cards on the dashboard are filtered to show just the data for these dates.

<Frame>
  <img alt="date_selector.gif" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/2K-MJunolF8arvf9/images/kb/ka0Vq00000018px-00N5w00000Ri7BU-0EM5w000005vPAJ.gif?s=e0d7a4a952ef576bcac2fa600e597ce3" style={{width: 899, height: 582}} width="1238" height="802" data-path="images/kb/ka0Vq00000018px-00N5w00000Ri7BU-0EM5w000005vPAJ.gif" />
</Frame>

***

Date Selector Cards are a type of Filter Cards. Learn about the other Filter Card types:

* [Slicer, Checkbox Selector, and Radio Button Selector Cards](/s/article/360043429313 "Slicer, Checkbox, and Radio Button Cards")
* [Range Selector Card](/s/article/360042924954 "Range Card")

***

### Power Date Selector Cards

In Analyzer, creating a Date Selector Card requires two columns or rows of data from your DataSet. One is a date column. Drag a date column to the **Date** field above the chart.

The other required column/row belongs in the **Group By** field. Though this field is required to power the card, it doesn't necessarily matter what column/row you place here. If you need to aggregate the data, you can use this field to do so.

For example, if the date column is duplicated in your DataSet, you can make the dates unique by aggregating.

<Frame>
  <img alt="Calendar.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/2K-MJunolF8arvf9/images/kb/ka0Vq00000018px-00N5w00000Ri7BU-0EM5w000005vPAL.png?fit=max&auto=format&n=2K-MJunolF8arvf9&q=85&s=e3740c87b598fea667af4dd4d93e0a93" style={{width: 900, height: 453}} width="1133" height="570" data-path="images/kb/ka0Vq00000018px-00N5w00000Ri7BU-0EM5w000005vPAL.png" />
</Frame>

Learn more about choosing data columns in [Applying DataSet Columns to Your Chart](/s/article/360043428713 "Applying DataSet Columns to Your Chart").

Learn how to format charts in Analyzer in our [Analyzer documentation](https://domo-support.domo.com/s/topic/0TO5w000000ZaoUGAS/analyzer?language=en_US).

### Customize Date Selector Cards

You can customize the appearance of a Date Selector Card by editing its chart properties. Learn about all available [Chart Properties](/s/topic/0TO5w000000ZaodGAC "Chart Properties").

This table details the unique properties of Date Selector Cards:

<table border="1" cellpadding="1" cellspacing="1" data-aura-rendered-by="33:209;a"><thead><tr><th colspan="1" rowspan="1"><p> Property </p></th><th colspan="1" rowspan="1"><p> Description </p></th><th colspan="1" rowspan="1"><p> Example </p></th></tr></thead><tbody><tr><td colspan="1" rowspan="1"><p><b> General </b> > <b> Selected Color </b></p></td><td colspan="1" rowspan="1"><p> Lets you change the highlight color used when you select a range of calendar dates in the card. </p></td><td colspan="1" rowspan="1"><p><img alt="date_selector_selection_color.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/2K-MJunolF8arvf9/images/kb/ka0Vq00000017sH-00N5w00000Ri7BU-0EM5w000005vP0S.png?fit=max&auto=format&n=2K-MJunolF8arvf9&q=85&s=515b771a6f9da3a74de951dc6abc024b" style={{width: 450, height: 270}} width="605" height="363" data-path="images/kb/ka0Vq00000017sH-00N5w00000Ri7BU-0EM5w000005vP0S.png" /></p></td></tr><tr><td colspan="1" rowspan="1"><p><b> Calendar view </b> > <b> Highlight today </b></p></td><td colspan="1" rowspan="1"><p> When checked, a box appears around today's date in the calendar. In the example at right, the date of "July 25" is highlighted. </p></td><td colspan="1" rowspan="1"><p><img alt="date_selector_highlighted_today.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/2K-MJunolF8arvf9/images/kb/ka0Vq00000017sH-00N5w00000Ri7BU-0EM5w000005vP0Z.png?fit=max&auto=format&n=2K-MJunolF8arvf9&q=85&s=05337dc789d346bfcf8cb9e04e8ef331" style={{width: 451, height: 270}} width="606" height="363" data-path="images/kb/ka0Vq00000017sH-00N5w00000Ri7BU-0EM5w000005vP0Z.png" /></p></td></tr><tr><td colspan="1" rowspan="1"><p><b> Calendar view </b> > <b> View </b></p></td><td colspan="1" rowspan="1"><p> Determines the calendar view that is used. The following options are available: </p><ul><li><p><b> Auto (Default) — </b> The view is determined automatically based on your data. For example, if you had at least a year's worth of data in your date column, a yearly view would be used. </p></li><li><p><b> Last Year Rolling — </b> The calendar shows dates from a year ago up until the current month. This is the option shown in the example at right. </p></li><li><p><b> Next Year Rolling — </b> The calendar shows dates from the current month up until a year from now. </p></li><li><p><b> Year </b><b> — </b> The current year is shown. </p></li><li><p><b> Month — </b> The current month is shown. </p></li></ul></td><td colspan="1" rowspan="1"><p><img alt="date_selector_rolling_year.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/2K-MJunolF8arvf9/images/kb/ka0Vq00000017sH-00N5w00000Ri7BU-0EM5w000005vP0Y.png?fit=max&auto=format&n=2K-MJunolF8arvf9&q=85&s=43957e908c304d29e4ab6d0d09ea6959" style={{width: 450, height: 261}} width="605" height="351" data-path="images/kb/ka0Vq00000017sH-00N5w00000Ri7BU-0EM5w000005vP0Y.png" /></p></td></tr><tr><td colspan="1" rowspan="1"><p><b> Calendar view </b> > <b> Dates from </b></p></td><td colspan="1" rowspan="1"><p> Specifies whether the dates that appear in the calendar are based on the current date, are automatically determined based on your data, or are user-specified (in which case, you will enter the date parameters in the <b> Year </b>, <b> Selected Year </b>, and <b> Month </b> fields. </p></td><td colspan="1" rowspan="1"><p /><p> — </p><p /></td></tr><tr><td colspan="1" rowspan="1"><p><b> Calendar view </b> > <b> Year </b></p></td><td colspan="1" rowspan="1"><p> Determines whether the year shown in the calendar is the current year, the previous year, or the next year. You can also specify a year by selecting <b> Specified </b> and entering the desired year in the <b> Selected Year </b> field. This option is only available when <b> Dates From </b> is set to <b> User Specified </b>. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p><b> Calendar view </b> > <b> Selected year </b></p></td><td colspan="1" rowspan="1"><p> Lets you enter a specific year to be shown in the calendar. This option is only available when <b> Dates From </b> is set to <b> User Specified </b> and <b> Year </b> is set to <b> Specified </b>. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p><b> Calendar view </b> > <b> Month </b></p></td><td colspan="1" rowspan="1"><p> Lets you enter a specific month to be shown in the calendar. This option is only available when <b> Dates From </b> is set to <b> User Specified </b> and <b> View </b> is set to <b> Month </b>. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p><b> Calendar view </b> > <b> First day of week </b></p></td><td colspan="1" rowspan="1"><p> Lets you select the first day of the week to be shown in your calendar. In the example at right, the first day of the week is Monday. </p></td><td colspan="1" rowspan="1"><p><img alt="date_selector_first_day_of_week.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/2K-MJunolF8arvf9/images/kb/ka0Vq00000017sH-00N5w00000Ri7BU-0EM5w000005vP0P.png?fit=max&auto=format&n=2K-MJunolF8arvf9&q=85&s=5da3d907c65cdf92b52bd3b819744ecf" style={{width: 499, height: 205}} width="550" height="226" data-path="images/kb/ka0Vq00000017sH-00N5w00000Ri7BU-0EM5w000005vP0P.png" /></p></td></tr><tr><td colspan="1" rowspan="1"><p><b> Calendar view </b> > <b> First month displayed </b></p></td><td colspan="1" rowspan="1"><p> Lets you select the first month of the year to be shown in your calendar. This option is only available when <b> Year </b> is selected in the <b> View </b> menu. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr></tbody></table>
