# datetime-picker — Examples

## Canonical

```html
<field-ui label="Appointment">
  <datetime-picker-ui
    name="appointment"
    min="2026-01-01T00:00"
    max="2026-12-31T23:59">
  </datetime-picker-ui>
</field-ui>
```

## Second precision

```html
<datetime-picker-ui
  precision="second"
  step="1"
  value="2026-05-24T14:30:45">
</datetime-picker-ui>
```

## Forced 24-hour cycle

```html
<datetime-picker-ui hour-cycle="h23"></datetime-picker-ui>
```

## Explicit commit (Apply / Cancel)

```html
<datetime-picker-ui name="explicit">
  <div slot="footer">
    <button-ui data-action="cancel" variant="ghost" text="Cancel"></button-ui>
    <button-ui data-action="apply" variant="primary" text="Apply"></button-ui>
  </div>
</datetime-picker-ui>
```

## Readonly

```html
<datetime-picker-ui readonly value="2026-05-24T14:30"></datetime-picker-ui>
```
