> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/writer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/writer/8.1.4/api-reference/uicomponents/uitimepicker.md).

# UITimePicker

Create a simple input with time-picker functionality.

**Since**: 6.5.0 (6.1.0)

| Name        | Type       | Default | Description                                                                                                                       |
| ----------- | ---------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
| placeholder | `string`   |         | **Required** - The text of the placeholder if no time is selected                                                                 |
| value       | `string`   |         | **Required** - The time to present in the input, should be in `HH:mm` format (12:00), if empty string, value will be set to "now" |
| disabled    | `boolean`  | `false` | Set to true to disable input                                                                                                      |
| onChange    | `function` |         | Callback for when the input is changed, callback will be called with one argument, the new value in `HH:mm` format                |

### Example

```js
import {UITimePicker} from 'writer'

render($$) {
    return $$('div').append(
        $$(UITimePicker, {
            value: '11:15',
            disabled: false,
            onChange: (newValue) => {
                this.extendState({ inputTimeValue: newValue })
            },
        }).ref('myInputTimeValue')
    )
}
```