Share via

Pemilih tanggal

  • Artikel

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 .

Contoh

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

Contoh perluasan pemilih tanggal

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows 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.

Membuat pemilih tanggal

Buka aplikasi Galeri WinUI 3 dan lihat DatePicker beraksi.

Aplikasi WinUI 3 Gallery mencakup contoh interaktif 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 memperlihatkan 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 bidang terkait Properti terlihat kefalse : DayVisible, MonthVisible, 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 di 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 sekitar bulan singkatan: ({month.abbreviated}).

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

Pemilih tanggal dengan bidang hari tersembunyi.

Nilai tanggal

Kontrol pemilih tanggal memiliki APIDateChanged/ dan SelectedDate/SelectedDateChanged. Perbedaan antara ini adalah yang Date tidak dapat diubah ke null, sementara SelectedDate dapat diubah ke null.

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

Pemilih tanggal tanpa tanggal yang dipilih.

Anda dapat mengatur properti MinYear dan MaxYear untuk membatasi nilai tanggal di 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 MinYear mengatur atau MaxYear, Anda perlu memastikan bahwa rentang tanggal yang valid dibuat oleh tanggal yang Anda tetapkan dan nilai default tanggal lain; jika tidak, tidak ada tanggal yang akan tersedia untuk dipilih di pemilih. Misalnya, pengaturan hanya yearDatePicker.MaxYear = new DateTimeOffset(new DateTime(900, 1, 1)); membuat rentang tanggal yang tidak valid dengan nilai MinYeardefault .

Menginisialisasi nilai tanggal

Properti tanggal tidak dapat ditetapkan sebagai string atribut XAML, karena pengurai XAML Windows Runtime tidak memiliki logika konversi untuk mengonversi string menjadi 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.

Catatan

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

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

<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 bersama-sama untuk memperbarui satu DateTime nilai, lihat Kontrol kalender, tanggal, dan waktu - Gunakan pemilih tanggal dan pemilih waktu bersama-samaTimePicker.

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;
    }
}

Dapatkan kode sampel