DatePicker
The DatePicker widget is a compact input control: tap it to open a scroll-wheel picker and choose a year, month, and day.
Use it to collect a single date — a birth date or a reservation date — in a tight space.
Definition and role
The DatePicker widget draws an input area that holds the selected date (or the hint text) and an icon. Tap the area to open the picker; confirm a date and the action wired to onDateSelected runs. Configure the display format, the year range, which of year, month, and day appear, the icon, and the size.
- Category: Contents
- Default hint text:
날짜를 선택하세요 - Default size:
176 x 36
Features
| Feature | Description |
|---|---|
| Date selection | Tap the input area to open the scroll-wheel picker, choose a year, month, and day, then confirm. Confirming runs the action wired to onDateSelected. |
| Display format | Set the display format of the selected date with dateFormat. When it's not set, the date appears as yyyy.MM.dd. |
| Hint text | Set the hint text shown before a date is selected (hintText) and its text style. |
| Year range | Limit the selectable years with minYear and maxYear. |
| Picker fields | Turn the year, month, and day fields on or off individually. |
| Icon and appearance | Adjust the input area icon (size and color) along with the size, padding, and background decoration. |
How to use
- Open the Contents category in the left widget palette.
- Drag and drop the DatePicker item onto the canvas.
- In the Properties panel on the right, set
hintText,dateFormat, the year range, and other values as you need them. - Wire the action (logic or script) that runs once a date is confirmed to
onDateSelected. - Adjust the icon, the size, and the background decoration (
decoration) if you need to.
Properties
Set the detailed text styles for the hint and the date in hintTextStyle and dateTextStyle. The properties below are specific to DatePicker.
| Property | Description | Default | Value / Type |
|---|---|---|---|
Size | Input area size — a grouped property that sets width and height together | Width 176, height 36 | Size (width and height, number in px) |
padding | Inner padding | Not set | Padding value |
decoration | Background decoration (color, border, and corners) | Not set | Box decoration |
hintText | Hint text shown before a date is selected | 날짜를 선택하세요 | String |
hintTextStyle | Text style for the hint text | Not set | Text style |
dateTextStyle | Text style for the selected date | Not set | Text style |
dateFormat | Display format for the selected date (yyyy.MM.dd when not set) | Not set | String |
icon | Icon shown in the input area | Not set | Icon settings |
iconSize | Icon size | 16 | Number (px) |
iconColor | Icon color | #9E9E9E (gray) | Color |
minYear | Earliest selectable year | 1900 | Number |
maxYear | Latest selectable year | 2099 | Number |
pickerYearVisible | Whether the year appears in the picker | true | true / false |
pickerMonthVisible | Whether the month appears in the picker | true | true / false |
pickerDayVisible | Whether the day appears in the picker | true | true / false |
selectedDate | Initial selected date | Not set | String |
Notes and tips
maxYear must be greater than or equal to minYear. If maxYear is smaller than minYear, it appears as a property error.
Turn pickerYearVisible, pickerMonthVisible, and pickerDayVisible off individually to shape which fields the picker shows — a year-and-month-only picker, for example.
Learn more
For the complete Widget Control (Property, Method, and Event) that drives this widget from a script, visit DatePicker Widget Control.