# Date Input Component ## Overview The date input component allows users to easily select dates. It's like a digital calendar where users can pick dates for appointments, deadlines, or any time-related tasks within an app. These components are essential because they simplify entering dates, reducing errors and ensuring accuracy. The date input component utilizes the native Android and iOS date pickers. ![Native Android date 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-LnTo9AJqy55zEn2QNWQ%2FThunkable%20Docs%20Exhibits%20\(37\).png?alt=media\&token=0e123d9f-ae9b-47c5-9008-323cb0c3e6c3) ## Properties ### Date Input | Property | Description | Data Type | | ----------- | ------------------------------------------- | ------------------------------------------------------------------------------------ | | Style | Format to use when displaying selected date | Select from menu `[YYYY-MM-DD, MM/DD/YYYY, M/D/YY, Month Day, Year, Mth. Day, Year]` | | Font Size | Size of font when displaying date | Number | | Font Style | Make the date's text italicized | True/False | | Font Weight | Make the date's text bold | True/False | | Color | Color of font when displaying date | Color | ### Layout | Property | Description | Data Type | | ----------- | ------------------------------------------------------------------------------------ | -------------------------------------------- | | X | Location of top left corner of date input on X-axis, where the left hand side is X=0 | Number | | Y | Location of top left corner of date input on Y-axis, where the top side is Y=0 | Number | | Height | Height of date input in pixels | Number | | Width | Width of date input in pixels | Number | | Resize Mode | Define dimensions of the date input component. | Select from list `[Stretch, Float in Place]` | ### **Style** | Property | Description | Data Type | | -------------- | --------------------------------------------------------------------------------------- | ------------------------------------------ | | Visible | Toggle whether your end users can see the date 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 date input in pixels | Number | | Border Radius | Radius of corners of border on date input in degrees | Number | | Shadow Color | Color of date input's shadow | Color | | Shadow Opacity | Opacity of date input's shadow | Number between 0 and 100 | | Shadow Radius | Radius of corners of date input's shadow in pixels | Number | | Shadow Offset | How far date input's shadow should be offset, in height and width, in pixels | Number | ## Date Input Blocks ### Event Blocks You can trigger actions to happen when an event occurs. #### When Date Input Date Picked This event fires when the user has selected a date using the date picker.
### Function Blocks #### Call Date Input's Get Date Returns the date from the date picker in the format Mon., DD, YYYY.
#### Call Date Input's Get Day Returns the date from the date picker in numeric form. For example, if the user selects February 17, 2024, this block returns 17. If they select 5 March 2025, this block returns 5.
#### Call Date Input's Get Month Returns the month from the date picker in numeric form. For example, if the user selects February 17, 2024, this block returns 2. If they select 5 March 2025, this block returns 3.
#### Call Date Input's Get Year Returns the year from the date picker in YYYY form.
#### Call Date Input's Launch Picker Opens the date picker to prompt the user to enter a date.
### Properties Blocks There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component. The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a group component to be enabled for a user until they've typed a set number of characters into a text input component, you can use the group's dark green set group's disabled status block. The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).