---
title: "TimePickerPopup"
description: "TimePickerPopup api."
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';

Use the timer picker to select the time, in either 24-hour or 12-hour mode (AM/PM).

<CodeSnippetMD imagePath="/src/assets/generated/std-widgets-timepicker.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets timepicker example'>
```slint
import { TimePickerPopup, Button } from "std-widgets.slint";
export component Example inherits Window {
    width: 400px;
    height: 600px;

    time-picker-button := Button {
        text: @tr("Open TimePicker");

        clicked => {
            time-picker.show();
        }
    }

    time-picker := TimePickerPopup {
        x: (root.width - self.width) / 2;
        y: (root.height - self.height ) / 2;
        width: 360px;
        height: 524px;
        canceled => {
            time-picker.close();
        }

        accepted(time) => {
            debug(time);
            time-picker.close();
        }
    }
}
```
</CodeSnippetMD>



## Properties

### use-24-hour-format
<SlintProperty propName="use-24-hour-format" typeName="bool" defaultValue="system default" >
If set to `true` 24 hours are displayed otherwise it is displayed in AM/PM mode. (default: system default, if cannot be determined then `true`)
</SlintProperty>

### title
<SlintProperty propName="title" typeName="string" >
The text that is displayed at the top of the picker.
</SlintProperty>

### time
<SlintProperty propName="time" typeName="struct" structName="Time" >
Set the initial displayed time.

```slint "time: { hour: 12, minute: 24 };"
TimePickerPopup {
    time: { hour: 12, minute: 24 };
}
```
</SlintProperty>

## Callbacks

### canceled()
The cancel button was clicked.

```slint {2-4}
time-picker := TimePickerPopup {
    canceled() => {
        time-picker.close();
    }
}
```

### accepted(Time)
The ok button was clicked.

```slint {2-5}
time-picker := TimePickerPopup {
    accepted(time) => {
        debug("Selected time: ", time);
        time-picker.close();
    }
}
```