# Date Picker Button

The Date Picker Button is the main button that remains visible on the canvas area. Users can click on this button to open the calendar and select dates. It is placed in the top-left corner. By default, the date picker button remains collapsed and can be expanded by clicking.

{% hint style="info" %} <mark style="color:blue;">NOTE</mark>

<mark style="color:blue;">Please note that this button is not available when the "Canvas displays all the time" checkbox is selected.</mark>
{% endhint %}

Below are the formatting options available for the Date Picker Button:

### Button Label[​](https://docs.powerviz.ai/datepicker/advanced-settings/date-picker#button-label) <a href="#button-label" id="button-label"></a>

* Customize the `label text` displayed on the button.
* Adjust the `width and height` of the button.
* Set the `border and background` color of the button.
* Choose the text color, size, and `font style`.
* Apply formatting options such as `bold, italic, and underline`.

&#x20;                   &#x20;

<figure><img src="https://powerviz-assets.s3.us-east-2.amazonaws.com/docs/doc-date-picker/19.png" alt=""><figcaption></figcaption></figure>

### Date Format[​](https://docs.powerviz.ai/datepicker/advanced-settings/date-picker#date-format) <a href="#date-format" id="date-format"></a>

Users have control over the date formatting shown on the button. As this button is not editable, the formatting is controlled with this option. The default date formatting is "MM/DD/YYY." You can choose a formatting style from the dropdown or write a custom date format.

Here is the list of pre-filled options:

<figure><img src="https://powerviz-assets.s3.us-east-2.amazonaws.com/docs/doc-date-picker/20.png" alt=""><figcaption></figcaption></figure>

#### How to write a custom date format?[​](https://docs.powerviz.ai/datepicker/advanced-settings/date-picker#how-to-write-a-custom-date-format) <a href="#how-to-write-a-custom-date-format" id="how-to-write-a-custom-date-format"></a>

This is a list of all the characters that can be used to write custom date formats.

<table><thead><tr><th width="168.33333333333331">Character</th><th width="319">Description</th><th>Example</th></tr></thead><tbody><tr><td>d</td><td>Display days in single digits without a 0 in the prefix</td><td>1-31</td></tr><tr><td>dd</td><td>Display the day as a two-digit number with a 0 in the prefix</td><td>01-31</td></tr><tr><td>ddd</td><td>Display the day as a three-digit number with 0 in the prefix</td><td>001-031</td></tr><tr><td>do</td><td>Display the day of the month in ordinal number format</td><td>1st-31st</td></tr><tr><td>Do</td><td>Display the day of the year in ordinal number format</td><td>1st-366th</td></tr><tr><td>DDD</td><td>Display the day of the year in three-digit number</td><td>001-366</td></tr><tr><td>M</td><td>Display the month in single-digit without a 0 in the prefix</td><td>1-12</td></tr><tr><td>MM</td><td>Display the month as a two-digit number with a 0 in the prefix</td><td>01-12</td></tr><tr><td>MMM</td><td>Display the month as abbreviation</td><td>Jan-Dec</td></tr><tr><td>MMMM</td><td>Display the month as a full month name</td><td>January-December</td></tr><tr><td>Yo</td><td>Display the year in ordinal number format</td><td>100th-9999th</td></tr><tr><td>yy</td><td>Display the year as a two-digit number</td><td>00-99</td></tr><tr><td>yyyy</td><td>Display the year as a four-digit number</td><td>100-999</td></tr><tr><td>q</td><td>Display the quarter in single-digit number without a 0 in the prefix</td><td>1-4</td></tr><tr><td>qq</td><td>Display the quarter as a two-digit number with a 0 in the prefix</td><td>01-01</td></tr><tr><td>qqq</td><td>Display the quarter as abbreviation</td><td>Q1-Q4</td></tr><tr><td>qqqq</td><td>Display the quarter as a full quarter name</td><td>1st quarter-4th quarter</td></tr><tr><td>h</td><td>Display the hour in single digit number</td><td>12</td></tr><tr><td>w</td><td>Display the week in single digit number</td><td>1-52</td></tr><tr><td>wo</td><td>Display the week in ordinal number format</td><td>1st-52nd</td></tr><tr><td>ww</td><td>Display the week as a two-digit number with a 0 in the prefix</td><td>01-52</td></tr><tr><td>c/e</td><td>Display the day of the week in single-digit number</td><td>1-7</td></tr><tr><td>cc/ ee</td><td>Display the day of the week as a two-digit number</td><td>01-07</td></tr><tr><td>ccc/eee</td><td>Display the day of the week as an abbreviation</td><td>Sun-Sat</td></tr><tr><td>cccc/eeee</td><td>Display the day of the week as a full name</td><td>Sunday-Saturday</td></tr><tr><td>P</td><td>Display the date in “MM-dd-yyyy” format</td><td>01-01-2021-12-31-2021</td></tr><tr><td>PP</td><td>Display the date in short localized format</td><td>Jan 1, 2021-Dec 31, 2021</td></tr><tr><td>PPP</td><td>Display the date in long localized format</td><td>January 1st 2021-December 31st 2021</td></tr><tr><td>PPPP</td><td>Display the date as long localized format</td><td>Friday, January 1st, 2021-Friday, December 31st, 2021</td></tr><tr><td>Any symbol</td><td>Display any symbol as separator between the day, month, and year</td><td></td></tr></tbody></table>

### Icons[​](https://docs.powerviz.ai/datepicker/advanced-settings/date-picker#icons) <a href="#icons" id="icons"></a>

The date picker button includes:

* Close "❌" icon: which you can use to remove the applied filter. You can easily toggle the icon on and off.
* Calendar "📅" icon: that appears on date picker.

In the settings, you have the option to customize the:

* Size,
* Color, and
* Radius of the icons.

This allows you to adjust the appearance of the icons to suit your preferences.

<figure><img src="https://powerviz-assets.s3.us-east-2.amazonaws.com/docs/doc-date-picker/21.png" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.powerviz.ai/powerviz/date-picker/advanced-settings-introduction/date-picker-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.