> 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/7.0.0/api-reference/uicomponents/uidatetimepicker.md).

# UIDateTimePicker

Create a simple input with time-picker functionality.

**Since**: 6.5.0 (6.4.0)

| Name                   | Type       | Default    | Description                                                                                                                                                      |
| ---------------------- | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| placeholder            | `string`   |            | **Required** - The text of the date picker placeholder if no date is selected                                                                                    |
| keepPlaceholderInValue | `boolean`  | `false`    | If set to true date picker value will be displayed together with placeholder, ex: "From 2020-01-01"                                                              |
| disabled               | `boolean`  | `false`    | Set to true to disable input                                                                                                                                     |
| size                   | `string`   | `"normal"` | Input size presentation. Supports small\|normal\|large                                                                                                           |
| modalSize              | `string`   |            | Adjusts the size of modal calendar, default size is large. "small", or "large"                                                                                   |
| type                   | `string`   |            | Style for the input.                                                                                                                                             |
| value                  | `string`   |            | **Required** - The date and time to present in the input, should be in `YYYY-MM-DD HH:mm` format (2020-04-23 12:00), if empty string, value will be set to "now" |
| onChange               | `function` |            | **Required** - Callback for when the input is changed, callback will be called with one argument, the new value in `YYYY-MM-DD HH:mm` format                     |

## Example

```javascript
import {UIDateTimePicker} from 'writer'

render($$) {
    return $$('div').append(
        $$(UIDateTimePicker, {
            placeholder: 'Pick a date',
            keepPlaceholderInValue: false,
            disabled: false,
            value: this.state.myDateTimeValue,
            onChange: (newDateTime) => {
                this.extendState({ myDateTimeValue: newDateTime })
            },
        }).ref('myDateTimeValue')
    )
}
```