> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/snap-to-place/date-input.md).

# Date Input

## Date Input Overview

A Date Input component is helpful when you want the user of your app to easily select a specific date using the native Android or iOS date picker

![Native Android Date Picker on the left and iOS on the right](/files/-LnTo9AJqy55zEn2QNWQ)

## Getting Started&#x20;

The Date Input component needs no set-up (Woohoo!). Just drag and drop the component into your project. As a bonus, the current date will automatically show up as a label.

When a user of your app taps on the Date Input, it will automatically launch the native Android or iOS date pickers.

## Set the Date Format

You can set the format of the date by choosing an option from the `Style` property. Currently supported styles are:

* YYYY-MM-DD
* MM/DD/YYYY
* M/D/YY
* Month Day, Year
* Mth. Day, Year

![](/files/-MOgFB0c48TarOvYYm61)

## Save the Date

The date that a user selects will show up automatically in the Date Input label but if you want to save the date somewhere to be uploaded later, you'll need to add a block like the one below.&#x20;

![](/files/-MWj1VJ1NuaCUAtxwjLf)

| Event     | Output                                                 |
| --------- | ------------------------------------------------------ |
| Get Date  | Date in whichever format you specify e.g. `YYYY-MM-DD` |
| Get Year  | Year in 4 digit format e.g. `2019`                     |
| Get Month | Numerical month from `1-12`                            |
| Get Day   | Day of the month from `1-31` (depending on the month)  |

## Events

### Date Picked

![](/files/-MWdA1uH__kEF6072Xxp)

## Functions

### Get Date&#x20;

![](/files/-MWdAhGTOQx-WGCokRJs)

### Get Day&#x20;

![](/files/-MWdAiVLU7JxA18syGRC)

### Get Month&#x20;

![](/files/-MWdAjkHYVUIsDwP5zZg)

### Get Year&#x20;

![](/files/-MWdAl-Eu3k3_ZMB3ULP)

### Launch Picker

![](/files/-MWdAm_370RLIyru1RM8)

## &#x20;Properties

### Background Color&#x20;

![](/files/-MWdBEs8JFDeI-7q9HgH)

### Color&#x20;

![](/files/-MWdBG-iE3DAHcDhWeGg)

### Computed Height and Width&#x20;

![](/files/-MWdBH2myOXi1LyF--WG)

### Font Size&#x20;

![](/files/-MWdBIb-SsH7l-Mf5rKG)

### Font Style&#x20;

![](/files/-MWdBJwzuRuLDzob-lpi)

### Font Weight&#x20;

![](/files/-MWdBL5wzfqAlH0f1emE)

### Style&#x20;

![](/files/-MWd9wq8u1YaEPEKSsQb)

### Text Align&#x20;

![](/files/-MWdBMDcmzf_7DoW2ltZ)

### Visible

![](/files/-MWdBNHANpBGuvf1ctSA)
