Share via

Pemilih tanggal kalender

  • Artikel

Pemilih tanggal kalender adalah kontrol turun bawah yang dioptimalkan untuk memilih satu tanggal dari tampilan kalender di mana informasi kontekstual seperti hari dalam seminggu atau kepenuhan kalender penting. Anda dapat mengubah kalender untuk memberikan konteks tambahan atau membatasi tanggal yang tersedia.

Apakah ini kontrol yang tepat?

Gunakan pemilih tanggal kalender untuk memungkinkan pengguna memilih satu tanggal dari tampilan kalender kontekstual. Gunakan untuk hal-hal seperti memilih janji temu atau tanggal keberangkatan.

Untuk membiarkan pengguna memilih tanggal yang diketahui, seperti tanggal lahir, di mana konteks kalender tidak penting, pertimbangkan untuk menggunakan pemilih tanggal.

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

Contoh

Titik entri menampilkan teks tempat penampung jika tanggal belum ditetapkan; jika tidak, ia menampilkan tanggal yang dipilih. Saat pengguna memilih titik entri, tampilan kalender diperluas bagi pengguna untuk membuat pilihan tanggal. Tampilan kalender melapisi UI lainnya; itu tidak mendorong UI lain keluar dari jalan.

Cuplikan layar Pemilih Tanggal Kalender memperlihatkan kotak teks pilih tanggal kosong lalu diisi dengan kalender di bawahnya.

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 kalender

Buka aplikasi Galeri WinUI 3 dan lihat CalendarDatePicker 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

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Calendar"/>

CalendarDatePicker arrivalCalendarDatePicker = new CalendarDatePicker();
arrivalCalendarDatePicker.Header = "Calendar";

Pemilih tanggal kalender yang dihasilkan terlihat seperti ini:

Cuplikan layar Pemilih Tanggal Kalender yang diisi dengan label yang bertuliskan Kalender.

Pemilih tanggal kalender memiliki CalendarView internal untuk memilih tanggal. Subset properti CalendarView, seperti IsTodayHighlighted dan FirstDayOfWeek, ada di CalendarDatePicker dan diteruskan ke CalendarView internal untuk memungkinkan Anda memodifikasinya.

Namun, Anda tidak dapat mengubah SelectionMode dari CalendarView internal untuk mengizinkan beberapa pilihan. Jika Anda perlu membiarkan pengguna memilih beberapa tanggal atau memerlukan kalender untuk selalu terlihat, pertimbangkan untuk menggunakan tampilan kalender alih-alih pemilih tanggal kalender. Lihat artikel Tampilan kalender untuk informasi selengkapnya tentang cara mengubah tampilan kalender.

Memilih tanggal

Gunakan properti Tanggal untuk mendapatkan atau mengatur tanggal yang dipilih. Secara default, properti Tanggal null. Saat pengguna memilih tanggal dalam tampilan kalender, properti ini diperbarui. Pengguna dapat menghapus tanggal dengan mengklik tanggal yang dipilih dalam tampilan kalender untuk membatalkan pilihannya.

Anda dapat mengatur tanggal dalam kode Anda seperti ini.

myCalendarDatePicker.Date = new DateTime(1977, 1, 5);

Saat Anda mengatur Tanggal dalam kode, nilai dibatasi oleh properti MinDate dan MaxDate .

  • Jika Date lebih kecil dari MinDate, nilainya diatur ke MinDate.
  • Jika Date lebih besar dari MaxDate, nilainya diatur ke MaxDate.

Anda dapat menangani peristiwa DateChanged untuk diberi tahu saat nilai Tanggal telah berubah.

Catatan

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

Mengatur teks header dan tempat penampung

Anda dapat menambahkan Header (atau label) dan PlaceholderText (atau marka air) ke pemilih tanggal kalender untuk memberi pengguna indikasi untuk apa digunakan. Untuk mengkustomisasi tampilan header, Anda bisa mengatur properti HeaderTemplate alih-alih Header.

Teks tempat penampung default adalah "pilih tanggal". Anda dapat menghapus ini dengan mengatur properti PlaceholderText ke string kosong, atau Anda bisa menyediakan teks kustom seperti yang diperlihatkan di sini.

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Arrival date"
                    PlaceholderText="Choose your arrival date"/>

Dapatkan kode sampel