# 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**.

***

***