> 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/~/changes/wHhkjLVeheBnfbpghRnw/time-input.md). # Time Input ## Time Input Overview A Time Input component is helpful when you want the user of your app to easily select a specific time using the native Android or iOS date picker ![Native Android Time Picker on the left and iOS on the right](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LnTo13qf4HKd1AV6bl9%2F-LnToCYZAQWY7dgHzB0y%2FThunkable%20Docs%20Exhibits%20\(38\).png?alt=media\&token=980aeae0-bdec-46c5-900e-27a74c618662) ## Properties ### Time Input | Property | Description | Data Type | | ----------- | ------------------------------------------- | ------------------------------------------------------- | | Style | Format to use when displaying selected date | Select from menu `[Hour:Minute AM/PM, Hour:Minute 24h]` | | Font Size | Size of font when displaying date | Number | | Font Style | Select whether font is italic | True/False | | Font Weight | Select whether font is bold | True/False | | Color | Color of font when displaying time | Color | ### Layout | Property | Description | Data Type | | ----------- | ------------------------------------------------------------------------------------ | -------------------------------------------- | | X | Location of top left corner of Time Input on X-axis, where the left hand side is X=0 | Number | | Y | Location of top left corner of Time Input on Y-axis, where the top side is Y=0 | Number | | Height | Height of Time Input in pixels | Number | | Width | Width of Time Input in pixels | Number | | Resize Mode | Define dimensions of the time input component/container | Select from list `[Stretch, Float in Place]` | ### **Style** | **Property** | Description | Data Type | | -------------- | --------------------------------------------------------------------------------------- | ------------------------------------------ | | Visible | Toggle whether your end users can see the Time Input | True/False | | Border Style | Set whether border style is solid, dotted or dashed (only visible if border width > 0) | Select from list `[solid, dotted, dashed]` | | Border Color | Color of border (only visible if border width > 0) | Color | | Border Width | Width of border around Time Input in pixels | Number | | Border Radius | Radius of corners of border on Time Input in degrees | Number | | Shadow Color | Color of Time Input's shadow | Color | | Shadow Opacity | Opacity of Time Input's shadow | Number between 0 and 100 | | Shadow Radius | Radius of corners of Time Input's shadow in pixels | Number | | Shadow Offset | How far Time Input's shadow should be offset, in Height and Width, in pixels | Number | ## Save the time The time that a user selects will show up automatically in the Time 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://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lny-PnVQUoAUGfRkGmD%2F-Lnylwwu9N8OSsiO9AmY%2FScreen%20Shot%202019-09-04%20at%204.43.02%20PM.png?alt=media\&token=d1296cd3-10c4-4caa-b197-5a036c44ab6f) | Event Property | Output | | -------------- | ------------------------------------ | | Get Time | Date in whichever format you specify | | Get Hours | Hour of the Day from `1-24` | | Get Minutes | Minutes from `1-60` | ## Blocks ### Events #### Time Picked Fires when the user has selected a time with the Time Input ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdEXc4oifn51e7pB7-%2Fe_time_picked.png?alt=media\&token=60aa87ae-7a6b-4636-aef9-edc12f419799) ### Functions #### Launch Picker Launches the Time Input picker for the user to select a time. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdElZVZfZu3OtewsmK%2Ff_launch.png?alt=media\&token=e337044e-8b86-480d-b5ee-058d7048dea3) #### Get Hour Returns the hour of the currently selected time in 24 hour format. Example: if the user selects 2:30 PM, this block will return 14. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdEht3nCQiwSaREzmi%2Ff_get_hour.png?alt=media\&token=e824b842-67cc-42ce-bfc6-7d3ad4258a00) #### Get Minute Returns the minute of the currently selected time. Example: if the user selects 2:30 PM, this block will return 30. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdEiyVKE-knlTI4qPS%2Ff_get_min.png?alt=media\&token=ce26d7bc-ad8d-42ee-9f00-e8d2453cd21b) #### Get Time Returns the selected time in the same format as the Style [property](/~/changes/wHhkjLVeheBnfbpghRnw/time-input.md#time-input) of the Time Input. Example: if the user selects 2:30 PM, and the Style is set to Hour:Minute AM/PM, this block will return 2:30 PM. If the user selects 2:30 PM, and the Style is set to Hour:Minute 24h, this block will return 14:30. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdEk2u-J9YYP1lbeaR%2Ff_get_time.png?alt=media\&token=11fe08dc-2772-4b82-83eb-19f29e755f1a) ### Properties Set and get [properties](/~/changes/wHhkjLVeheBnfbpghRnw/time-input.md#properties) of the Time Input #### Style ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdFFIh3n2aLpMv_MDN%2Fstyle.png?alt=media\&token=8f56b708-4a80-4bad-889e-996624d03f48) #### Computed Height and Width Returns the height/width of the Time Input on the device screen in pixels. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdFAVd35sg-Nxp--KO%2Fcomp.png?alt=media\&token=1bd2d2c8-7fca-4904-9590-82fb9ec4f4b6) #### Visible ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdFIPizivSNTF3uuvR%2Fvisible.png?alt=media\&token=b7220d1a-e91f-4079-9360-6ef6d45ef699) #### Font Size ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdFBrAJFONxB4eKouO%2Ffont_size.png?alt=media\&token=0db3239b-e521-4a85-9cfd-6550afac8fd9) #### Color ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdF9J9j97XK-6FCUGr%2Fcolor.png?alt=media\&token=efa6f5c8-4117-48d2-bb1c-6b9bc15b7dab) #### Background Color Set the background color of the Time Input as it is displayed in the project. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdF851BZbdXcWXuNmU%2Fbg_color.png?alt=media\&token=294f0020-f21a-40d2-b841-af027b5bd5a3) #### Font Style ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdFCyv8f1hGcFyz1wU%2Ffont_style.png?alt=media\&token=cbb8d7b3-5a16-4cac-8f3d-73d055cec560) #### Font Weight ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdFE7yClDZG-aLuP5N%2Ffont_weight.png?alt=media\&token=3039d3df-488b-453c-9141-bb6d5c75c4d3) #### Text Align Set the Text Alignment of the Time Input to `Auto`, `Left`, `Right`, `Center` or `Justify`. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWd1ztfxxPjInQ3k4cx%2F-MWdFH16ac3W6UKX0bmu%2Ftext_align.png?alt=media\&token=71fe56e0-9723-4048-b2b4-5b7abf227dca)