# 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](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LnTo13qf4HKd1AV6bl9%2F-LnTo9AJqy55zEn2QNWQ%2FThunkable%20Docs%20Exhibits%20\(37\).png?alt=media\&token=0e123d9f-ae9b-47c5-9008-323cb0c3e6c3) ## Getting Started 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 ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MOgDwbyry-ASSuOep1Z%2F-MOgFB0c48TarOvYYm61%2Fdate_input_style.png?alt=media\&token=e299def0-a17c-4c84-b793-9b8dc10e42a7) ## 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. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWj-R6ifvVhRiIOoskf%2F-MWj1VJ1NuaCUAtxwjLf%2Fget_date.png?alt=media\&token=10308ee9-3885-4738-9b6e-635a4ea80b21) | 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 ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdA1uH__kEF6072Xxp%2Fdp1-8.png?alt=media\&token=aa388934-9a7a-486b-b33c-4421a3347518) ## Functions ### Get Date ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdAhGTOQx-WGCokRJs%2Ff_get_date.png?alt=media\&token=ed7f39a0-8b9b-4b2e-9e50-38d83b226af1) ### Get Day ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdAiVLU7JxA18syGRC%2Ff_get_day.png?alt=media\&token=786e5d90-2f97-4c21-a713-87cd885c68e8) ### Get Month ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdAjkHYVUIsDwP5zZg%2Ff_get_month.png?alt=media\&token=b1d75d07-a301-46bb-bd81-35739998c540) ### Get Year ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdAl-Eu3k3_ZMB3ULP%2Ff_get_year.png?alt=media\&token=fc75eca5-392a-4c05-9a82-7c70812e48a3) ### Launch Picker ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdAm_370RLIyru1RM8%2Ff_launch_picker.png?alt=media\&token=dc40af26-2913-4c1f-9c90-f44655178074) ## Properties ### Background Color ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdBEs8JFDeI-7q9HgH%2Fbg_color.png?alt=media\&token=d28b7b56-d5c4-4652-bf96-ced08a8193eb) ### Color ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdBG-iE3DAHcDhWeGg%2Fcolor.png?alt=media\&token=5ebbdc4f-9086-40c3-be07-17aa12067b76) ### Computed Height and Width ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdBH2myOXi1LyF--WG%2Fcomp_height.png?alt=media\&token=1277ef4e-0431-4dfa-808f-af4b044c16b1) ### Font Size ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdBIb-SsH7l-Mf5rKG%2Ffont_size.png?alt=media\&token=c32fa983-987c-4eb4-902c-218aaead4e4d) ### Font Style ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdBJwzuRuLDzob-lpi%2Ffont_style.png?alt=media\&token=d0f8447a-acbb-4373-8355-da6da29a7069) ### Font Weight ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdBL5wzfqAlH0f1emE%2Ffont_weight.png?alt=media\&token=94019e9e-20a3-432a-a3b3-fe29b9883841) ### Style ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWd9wq8u1YaEPEKSsQb%2Fdp1-2.png?alt=media\&token=e2fd3782-08a3-4126-960d-a97c4f7fde7b) ### Text Align ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdBMDcmzf_7DoW2ltZ%2Ftext_align.png?alt=media\&token=19ea3363-9446-414c-b48f-3a7c0e44399f) ### Visible ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdBNHANpBGuvf1ctSA%2Fvisible.png?alt=media\&token=079013c1-a49d-45a9-9cb8-58c29d7c1a89)