Pemilih waktu

Pemilih waktu memberi Anda cara standar untuk memungkinkan pengguna memilih nilai waktu menggunakan sentuhan, mouse, atau input keyboard.

Apakah ini kontrol yang tepat?

Gunakan pemilih waktu untuk memungkinkan pengguna memilih satu nilai waktu.

Untuk informasi selengkapnya tentang memilih kontrol yang tepat, lihat artikel Kontrol tanggal dan waktu.

Examples

Titik entri untuk menampilkan waktu yang dipilih, dan ketika pengguna memilih titik entri, permukaan pemilih meluas secara vertikal dari tengah bagi pengguna untuk membuat pilihan. Pemilih waktu melapisi UI lain; itu tidak mendorong UI lain keluar dari jalan.

Membuat pemilih waktu

• API Penting:Kelas TimePicker, properti SelectedTime

Buka aplikasi Galeri WinUI 3 dan lihat TimePicker beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Contoh ini menunjukkan cara membuat pemilih waktu sederhana dengan header.

<TimePicker x:Name="arrivalTimePicker" Header="Arrival time"/>

TimePicker arrivalTimePicker = new TimePicker();
arrivalTimePicker.Header = "Arrival time";

Pemilih waktu yang dihasilkan terlihat seperti ini:

Memformat pemilih waktu

Secara bawaan, pengatur waktu menunjukkan jam 12-jam dengan pemilih AM/PM. Anda dapat mengatur properti ClockIdentifier ke "24HourClock" untuk menampilkan jam 24 jam sebagai gantinya.

<TimePicker Header="24HourClock" SelectedTime="18:21" ClockIdentifier="24HourClock"/>

Anda dapat mengatur properti MinuteIncrement untuk menunjukkan kenaikan waktu yang ditampilkan dalam pemilih menit. Misalnya, 15 menentukan bahwa TimePicker kontrol menit hanya menampilkan pilihan 00, 15, 30, 45.

<TimePicker MinuteIncrement="15"/>

Pemilih waktu dengan interval 15 menit.

Nilai waktu

Kontrol pemilih waktu memiliki Time/TimeChanged dan SelectedTime/SelectedTimeChanged APIs. Perbedaan antara ini adalah bahwa Time tidak dapat bernilai null, sementara SelectedTime dapat bernilai null.

Nilai SelectedTime digunakan untuk mengisi pemilih waktu dan secara default adalah null. Jika SelectedTime adalah null, properti Time diatur ke TimeSpan 0; jika tidak, nilai Time disinkronkan dengan nilai SelectedTime. Ketika SelectedTime adalah null, pemilih diatur ke 'tidak ditetapkan' dan menunjukkan nama kolom alih-alih waktu.

Menginisialisasi nilai waktu

Dalam kode, Anda dapat menginisialisasi properti waktu ke nilai jenis TimeSpan:

TimePicker timePicker = new TimePicker
{
    SelectedTime = new TimeSpan(14, 15, 00) // Seconds are ignored.
};

Anda dapat mengatur nilai waktu sebagai atribut di XAML. Ini mungkin paling mudah jika Anda sudah mendeklarasikan TimePicker objek di XAML dan tidak menggunakan pengikatan untuk nilai waktu. Gunakan string dalam bentuk Hh:Mm di mana Hh adalah jam dan bisa antara 0 dan 23 dan Mm adalah menit dan bisa antara 0 dan 59.

<TimePicker SelectedTime="14:15"/>

Nota

Untuk informasi penting tentang nilai tanggal dan waktu, lihat nilai DateTime dan Calendar di artikel kontrol tanggal dan waktu.

Penggunaan nilai waktu

Untuk menggunakan nilai waktu di aplikasi, Anda biasanya menggunakan pengikatan data ke properti SelectedTime atau Time , menggunakan properti waktu langsung dalam kode Anda, atau menangani peristiwa SelectedTimeChanged atau TimeChanged .

Untuk contoh penggunaan DatePicker dan TimePicker bersama-sama untuk memperbarui satu nilai DateTime, lihat Kontrol kalender, tanggal, dan waktu - Gunakan pemilih tanggal dan pemilih waktu secara bersamaan.

Di sini, SelectedTime properti digunakan untuk membandingkan waktu yang dipilih dengan waktu saat ini.

Perhatikan bahwa karena properti SelectedTime dapat bernilai null, Anda harus secara eksplisit mengonversinya ke DateTime, seperti ini: DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);. Properti Time , bagaimanapun, dapat digunakan tanpa pemeran, seperti ini: DateTime myTime = DateTime.Today + checkTimePicker.Time;.

<StackPanel>
    <TimePicker x:Name="checkTimePicker"/>
    <Button Content="Check time" Click="{x:Bind CheckTime}"/>
    <TextBlock x:Name="resultText"/>
</StackPanel>

private void CheckTime()
{
    // Using the Time property.
    // DateTime myTime = DateTime.Today + checkTimePicker.Time;
    // Using the SelectedTime property (nullable requires cast to DateTime).
    DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);
    if (DateTime.Now >= myTime)
    {
        resultText.Text = "Your selected time has already past.";
    }
    else
    {
        string hrs = (myTime - DateTime.Now).Hours.ToString();
        string mins = (myTime - DateTime.Now).Minutes.ToString();
        resultText.Text = string.Format("Your selected time is {0} hours, {1} minutes from now.", hrs, mins);
    }
}

Topik terkait

• Kontrol tanggal dan waktu
• Pemilih tanggal kalender
• Tampilan kalender
• Pemilih tanggal