Aracılığıyla paylaş


Tarih seçici

Tarih seçici, kullanıcıların dokunma, fare veya klavye girişi kullanarak yerelleştirilmiş tarih değeri seçmesine izin vermek için standartlaştırılmış bir yol sağlar.

Tarih seçici örneği

Doğru kontrol bu mu?

Kullanıcının, takvimin bağlamının önemli olmadığı, doğum tarihi gibi bilinen bir tarih seçmesine izin vermek için tarih seçici kullanın.

Takvimin bağlamı önemliyse, takvim tarih seçicisi veya takvim görünümü kullanmayı göz önünde bulundurun.

Doğru tarih denetimini seçme hakkında daha fazla bilgi için Tarih ve saat denetimleri makalesine bakın.

Örnekler

Giriş noktası seçilen tarihi görüntüler ve kullanıcı giriş noktasını seçtiğinde, seçim yapması için bir seçici yüzey ortadan yukarı ve aşağıya dikey olarak genişler. Tarih seçici diğer kullanıcı arabiriminin üzerine gelir; diğer kullanıcı arabirimini yerinden oynatmaz.

Tarih seçici genişletme örneği

Tarih seçici oluşturma

WinUI 3 Galeri simgesi WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Bu örnekte, üst bilgiyle basit bir tarih seçici oluşturma gösterilmektedir.

<DatePicker x:Name="exampleDatePicker" Header="Pick a date"/>
DatePicker exampleDatePicker = new DatePicker();
exampleDatePicker.Header = "Pick a date";

Sonuçta elde edilen tarih seçici şöyle görünür:

Tarih seçici örneği

Tarih seçiciyi biçimlendirme

Varsayılan olarak, tarih seçici günü, ayı ve yılı gösterir. Tarih seçici senaryonuz tüm alanları gerektirmiyorsa, ihtiyacınız olmayan alanları gizleyebilirsiniz. Bir alanı gizlemek için, ilgili Visible alanınışu şekilde falseayarlayın: DayVisible, MonthVisible veya YearVisible.

Burada yalnızca yıl gereklidir, bu nedenle gün ve ay alanları gizlenir.

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

Gün ve ay alanlarının gizli olduğu bir tarih seçici.

ComboBox içindeki her bir DatePicker'nin dize içeriği bir DateTimeFormatter tarafından oluşturulur. Biçim DateTimeFormatter veya biçim deseni olan bir dize sağlayarak tarih değerinin nasıl biçimlendirildiğini bildirirsiniz. Daha fazla bilgi için bkz. DayFormat, MonthFormat ve YearFormat özellikleri.

Burada, ayı tamsayı ve kısaltma olarak göstermek için bir biçim deseni kullanılır. Biçim desenine, ay kısaltması etrafına parantez koymak gibi sabit dizeler ekleyebilirsiniz: ({month.abbreviated}).

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

Gün alanı gizli olan bir tarih seçici.

Tarih değerleri

Tarih seçici denetimi hem Date/DateChanged hem de SelectedDate/SelectedDateChanged API'lerine sahiptir. Bunlar arasındaki fark, Date null olamazken SelectedDate null olabilir olmasıdır.

SelectedDate değeri tarih seçiciyi doldurmak için kullanılır ve varsayılan olarak null. SelectedDate nullise, Date özelliği 31.12.1600 olarak ayarlanır; aksi takdirde, Date değeri SelectedDate değeriyle eşitlenir. SelectedDate nullolduğunda seçici 'unset' olur ve tarih yerine alan adlarını gösterir.

Seçili tarih olmayan bir tarih seçici.

Seçicideki tarih değerlerini kısıtlamak için MinYear ve MaxYear özelliklerini ayarlayabilirsiniz. Varsayılan olarak, MinYear geçerli tarihten 100 yıl önceye, MaxYear ise geçerli tarihten 100 yıl önceye ayarlanır.

Yalnızca MinYear veya MaxYearayarlarsanız, ayarladığınız tarihe ve diğer tarihin varsayılan değerine göre geçerli bir tarih aralığı oluşturulduğundan emin olmanız gerekir; aksi takdirde, seçicide seçilebilecek bir tarih olmayacaktır. Örneğin, yalnızca yearDatePicker.MaxYear = new DateTimeOffset(new DateTime(900, 1, 1)); ayarı, varsayılan değeri MinYearolan geçersiz bir tarih aralığı oluşturur.

Tarih değeri başlatma

Windows Runtime XAML ayrıştırıcısının dizeleri tarihlere DateTime / DateTimeOffset nesneleri olarak dönüştürmek için dönüştürme mantığı olmadığından, tarih özellikleri XAML öznitelik dizesi olarak ayarlanamaz. Bu nesnelerin kodda tanımlanıp geçerli tarih dışında bir tarihe ayarlanabilmesi için önerilen bazı yöntemler aşağıdadır.

Başka bir olası teknik, bir veri nesnesi olarak veya veri içeriğinde mevcut olan bir tarih tanımlamak, ardından tarih özelliğini, tarihe veri olarak erişebilen bir {Binding} işaretleme uzantısına başvuran bir XAML özniteliği olarak ayarlamaktır.

Uyarı

Tarih değerleri hakkında önemli bilgiler için Tarih ve saat denetimleri makalesindeki DateTime ve Calendar değerleri bölümüne bakın.

Bu örnekte, farklı SelectedDate denetimlerinde MinYear, MaxYearve DatePicker özelliklerini ayarlama gösterilmektedir.

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

Tarih değerlerini kullanma

Uygulamanızda tarih değerini kullanmak için genellikle SelectedDate özelliğine bir veri bağlaması kullanırsınız veya SelectedDateChanged olayını işlersiniz.

Tek bir DatePicker değerini güncellemek için TimePicker ve DateTime'i birlikte kullanma örneğine bakın. Daha fazla bilgi için Takvim, tarih ve saat denetimleri - Tarih seçici ve saat seçiciyi birlikte kullanma.

Burada, kullanıcının varış tarihini seçmesine izin vermek için bir DatePicker kullanırsınız. SelectedDateChanged olayını, adı olan bir arrivalDateTime örneğini güncelleştirmek için işlersiniz.

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