Bagikan melalui

Pemilih tanggal

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

Contoh pemilih tanggal

Apakah ini kontrol yang tepat?

Gunakan pemilih tanggal untuk mengizinkan pengguna memilih tanggal yang diketahui, seperti tanggal lahir, di mana konteks kalender tidak penting.

Jika konteks kalender penting, pertimbangkan untuk menggunakan pemilih tanggal kalender atau tampilan kalender.

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

Examples

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

Contoh perluasan pemilih tanggal

Membuat pemilih tanggal

Buka aplikasi Galeri WinUI 3 dan lihat DatePicker beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Contoh ini memperlihatkan cara membuat pemilih tanggal sederhana dengan header.

<DatePicker x:Name="exampleDatePicker" Header="Pick a date"/>

DatePicker exampleDatePicker = new DatePicker();
exampleDatePicker.Header = "Pick a date";

Pemilih tanggal yang dihasilkan terlihat seperti ini:

Contoh pemilih tanggal

Memformat pemilih tanggal

Secara default, pemilih tanggal menunjukkan hari, bulan, dan tahun. Jika skenario Anda untuk pemilih tanggal tidak memerlukan semua bidang, Anda dapat menyembunyikan yang tidak Anda butuhkan. Untuk menyembunyikan bidang, atur properti Visible yang sesuai ke: DayVisible, false, atau YearVisible.

Di sini, hanya tahun yang diperlukan, sehingga bidang hari dan bulan disembunyikan.

<DatePicker x:Name="yearDatePicker" Header="In what year was Microsoft founded?" 
            MonthVisible="False" DayVisible="False"/>

Pemilih tanggal dengan bidang hari dan bulan disembunyikan.

Konten string masing-masing ComboBox dalam DatePicker dibuat oleh DateTimeFormatter. Anda menginformasikan DateTimeFormatter cara memformat nilai tanggal dengan menyediakan string yang merupakan templat format atau pola format. Untuk informasi selengkapnya, lihat properti DayFormat, MonthFormat, dan YearFormat .

Di sini, pola format digunakan untuk menunjukkan bulan sebagai bilangan bulat dan singkatan. Anda dapat menambahkan string harfiah ke pola format, seperti tanda kurung yang mengelilingi singkatan bulan: ({month.abbreviated}).

<DatePicker MonthFormat="{}{month.integer(2)} ({month.abbreviated})" DayVisible="False"/>

Pemilih tanggal dengan bidang hari tersembunyi.

Nilai tanggal

Kontrol pemilih tanggal memiliki Date/DateChanged dan SelectedDate/SelectedDateChanged APIs. Perbedaan antara ini adalah bahwa Date tidak dapat bernilai null, sementara SelectedDate dapat bernilai null.

Nilai SelectedDate digunakan untuk mengisi pemilih tanggal dan null sebagai default. Jika SelectedDate adalah null, properti Date diatur ke 31/12/1600; jika tidak, nilai Date disinkronkan dengan nilai SelectedDate. Ketika SelectedDate adalah null, pemilih tanggal 'tidak disetel' dan menampilkan nama bidang bukan tanggal.

Pemilih tanggal tanpa tanggal yang dipilih.

Anda dapat mengatur properti MinYear dan MaxYear untuk membatasi nilai tanggal di elemen pemilih. Secara default, MinYear diatur ke 100 tahun sebelum tanggal saat ini dan MaxYear diatur ke 100 tahun melewati tanggal saat ini.

Jika Anda hanya mengatur MinYear atau MaxYear, Anda perlu memastikan bahwa rentang tanggal yang valid dibuat oleh tanggal yang Anda tetapkan bersama dengan nilai default dari tanggal yang lain; jika tidak, tidak ada tanggal yang akan tersedia untuk dipilih di pemilih. Misalnya, hanya mengatur yearDatePicker.MaxYear = new DateTimeOffset(new DateTime(900, 1, 1)); menciptakan rentang tanggal yang tidak valid dengan nilai default MinYear.

Menginisialisasi nilai tanggal

Properti tanggal tidak dapat ditetapkan sebagai string atribut XAML, karena pengurai Windows Runtime XAML tidak memiliki logika konversi untuk mengonversi string ke tanggal sebagai objek DateTime / DateTimeOffset. Berikut adalah beberapa cara yang disarankan objek ini dapat ditentukan dalam kode dan diatur ke tanggal selain tanggal saat ini.

Teknik lain yang mungkin adalah menentukan tanggal yang tersedia sebagai objek data atau dalam konteks data, lalu mengatur properti tanggal sebagai atribut XAML yang mereferensikan ekstensi markup {Binding} yang dapat mengakses tanggal sebagai data.

Nota

Untuk informasi penting tentang nilai DateTime dan nilai Kalender, lihat artikel Kontrol tanggal dan waktu.

Contoh ini menunjukkan pengaturan properti SelectedDate, MinYear, dan MaxYear pada kontrol DatePicker yang berbeda.

<DatePicker x:Name="yearDatePicker" MonthVisible="False" DayVisible="False"/>
<DatePicker x:Name="arrivalDatePicker" Header="Arrival date"/>

public MainPage()
{
    this.InitializeComponent();

    // Set minimum year to 1900 and maximum year to 1999.
    yearDatePicker.SelectedDate = new DateTimeOffset(new DateTime(1950, 1, 1));
    yearDatePicker.MinYear = new DateTimeOffset(new DateTime(1900, 1, 1));
    // Using a different DateTimeOffset constructor.
    yearDatePicker.MaxYear = new DateTimeOffset(1999, 12, 31, 0, 0, 0, new TimeSpan());

    // Set minimum to the current year and maximum to five years from now.
    arrivalDatePicker.MinYear = DateTimeOffset.Now;
    arrivalDatePicker.MaxYear = DateTimeOffset.Now.AddYears(5);
}

Menggunakan nilai tanggal

Untuk menggunakan nilai tanggal di aplikasi, Anda biasanya menggunakan pengikatan data ke properti SelectedDate , atau menangani peristiwa SelectedDateChanged .

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, Anda menggunakan DatePicker untuk mengizinkan pengguna memilih tanggal kedatangan mereka. Anda menangani SelectedDateChanged peristiwa untuk memperbarui instans DateTime bernama arrivalDateTime.

<StackPanel>
    <DatePicker x:Name="arrivalDatePicker" Header="Arrival date"
                DayFormat="{}{day.integer} ({dayofweek.abbreviated})"
                SelectedDateChanged="arrivalDatePicker_SelectedDateChanged"/>
    <Button Content="Clear" Click="ClearDateButton_Click"/>
    <TextBlock x:Name="arrivalText" Margin="0,12"/>
</StackPanel>

public sealed partial class MainPage : Page
{
    DateTime arrivalDateTime;

    public MainPage()
    {
        this.InitializeComponent();

        // Set minimum to the current year and maximum to five years from now.
        arrivalDatePicker.MinYear = DateTimeOffset.Now;
        arrivalDatePicker.MaxYear = DateTimeOffset.Now.AddYears(5);
    }

    private void arrivalDatePicker_SelectedDateChanged(DatePicker sender, DatePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalDatePicker.SelectedDate != null)
        {
            arrivalDateTime = new DateTime(args.NewDate.Value.Year, args.NewDate.Value.Month, args.NewDate.Value.Day);
        }
        arrivalText.Text = arrivalDateTime.ToString();
    }

    private void ClearDateButton_Click(object sender, RoutedEventArgs e)
    {
        arrivalDatePicker.SelectedDate = null;
        arrivalText.Text = string.Empty;
    }
}

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan Windows App SDK dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat Radius sudut.

  • Last updated on