# Date Picker

## **General**

General settings for the **Date Picker** input.

<figure><img src="https://362195087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fgc2JHjhPy9iPEiSY6VbF%2Fuploads%2FmDAXIuXlp4yhYYxil4DD%2Fdate-picker1.png?alt=media&#x26;token=2b8a1f41-e047-40af-9c3c-3616263f958b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://362195087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fgc2JHjhPy9iPEiSY6VbF%2Fuploads%2FnRKgkQEaGZgZK3u4xNeI%2Fdate-picker2.png?alt=media&#x26;token=64860ad0-4590-4d73-a315-49cd97da2fb0" alt=""><figcaption></figcaption></figure>

### **Label**

Here, you will add the label for your date picker input.

### **Field Name**

Here, you will add the field name that will be used to save your date picker input's data.

### **Date Picker Type**

* **Single Date Picker**\
  Let's the user select a single date only.
* **Date Range Picker**\
  Let's the user select all dates between two dates.

### **First Day of the Week**

Here, you will set which day will be considered the first day of the week (e.g., Sunday or Monday).

### **Calendar Language**

Here, you will set the language of the calendar (e.g., English, French, Spanish).

### **Date Format**

Here, you will define the format in which the date should be displayed (e.g., MM/DD/YYYY).

### **How Many Months to Show by Default**

Here, you will set the number of months to display by default (e.g., 1, 2, or 3 months).

### **Number of Columns**

Here, you will set the number of columns to display in the calendar (e.g., 2 columns).

### **Required**

Checking **Required** will make the select input field mandatory, preventing users from submitting the form without selecting an option.

***

## **Styles**

<figure><img src="https://362195087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fgc2JHjhPy9iPEiSY6VbF%2Fuploads%2FcGcklkW27uCGviDbophz%2Fdate-picker3.png?alt=media&#x26;token=a7a273f5-35e7-4e7c-97d5-92247e06bb1a" alt=""><figcaption></figcaption></figure>

### **Z-index**

Here, you will set the **Z-index** for the date picker input, determining its stacking order on the page.

### **Selected Date Text Color (Light Theme)**

Here, you will set the text color for the selected date when the user is using the **light theme**.

### **Selected Date Text Color (Dark Theme)**

Here, you will set the text color for the selected date when the user is using the **dark theme**.

### **Selected Date Background Color (Light Theme)**

Here, you will set the background color for the selected date when the user is using the **light theme**.

### **Selected Date Background Color (Dark Theme)**

Here, you will set the background color for the selected date when the user is using the **dark theme**.

### **Today Date Color (Light Theme)**

Here, you will set the color for today's date when the user is using the **light theme**.

### **Today Date Color (Dark Theme)**

Here, you will set the color for today's date when the user is using the **dark theme**.

***

***


---

# 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.flowappz.com/home/form-fields-pro/fields/date-picker.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.