TOC

This article is currently in the process of being translated into Portuguese (~55% done).

Controles diversos:

The DatePicker control

Lidar com datas pode ser complicado. Existem várias formas de escrever uma data, dependendo da origem do(s) utilizador(es), e por isso, permitir que os utilizadores escrevam uma data livremente numa TextBox quase nunca é uma boa ideia. Felizmente para nós, o WPF possui vários controlos para manusear datas.

Nós já vimos um destes controles, o controle Calendar, que é ótimo se selecionar uma data é o objetivo principal do seu diálogo. Contudo, com frequência você ter que obter uma data junto com diversas outras informações, em um formulário com diversos controles de entrada tais como TextBoxs, ComboBoxs e etc... Para essas situações, você precisa de um controle de entrada de datas que possa se misturar com o resto e se encaixar no layout de um formulário - em outras palavras, você precisa do controle DatePicker!

O controle DatePicker será exibido de forma parecida com um TextBox comum, mas com um pequeno botão que exibirá um calendário quando clicado, permitindo que o usuário selecione uma data. Aqui está um exemplo de como ele pode se parecer:

Então você pode preencher a data manualmente ou clicar no pequeno botão para selecionar a data em um controle de calendário:

Adicionando um controle DatePicker

O controle DatePicker funciona de imediato - basta adicioná-lo em qualquer lugar na sua Window e você já está pronto para usá-lo:

<DatePicker></DatePicker>

Aqui está o código completo usado para criado o diálogo de exemplo acima:

<Window x:Class="WpfTutorialSamples.Misc_controls.DatePickerSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfTutorialSamples.Misc_controls"
mc:Ignorable="d"
Title="DatePickerSample" Height="300" Width="300">
    <StackPanel Margin="20">
<Label>Name:</Label>
<TextBox />
<Label>Birthday:</Label>
<DatePicker></DatePicker>
<Label>Gender:</Label>
<ComboBox>
    <ComboBoxItem>Female</ComboBoxItem>
    <ComboBoxItem>Male</ComboBoxItem>
</ComboBox>
<Button Margin="20">Signup</Button>
    </StackPanel>
</Window>

DisplayDate e SelectedDate

Por padrão, o controle DatePicker não terá uma data selecionada - isto é deixado para o usuário. Contudo, se você precisar pré-preencher o controle com uma data, basta usar a propriedade SelectedDate, assim:

<DatePicker SelectedDate="2000-12-31"></DatePicker>

Agora o DatePicker terá uma data pré-selecionada, que o usuário pode substituir selecionando outra data. A propriedade SelectedDate também pode ser definida a partir do Code-behind, e talvez mais importante, também pode ser lida a partir do Code-behind, ou você pode vincular o valor ao seu Model ou outro controle.

As vezes você precisa começar o calendário em uma certa data, sem selecionar uma data para o usuário. Para isso, nós temos a propriedade DisplayDate. O valor padrão é a data atual, mas você pode mudar isso facilmente:

<DatePicker Name="dp1" DisplayDate="2019-01-01" />

Perceba como, quando usamos a propriedade DisplayDate, o calendário começa na data especificada (e a destaca), mas nenhuma data está realmente selecionada (conforme indicado pelo texto "Select a date").

SelectedDateFormat

Outra propriedade interessante é SelectedDateFormat. O valor padrão é Short, mas se você muda-la para Long, a data será formatada de uma forma um pouco mais longa.

<DatePicker SelectedDate="2000-12-31" SelectedDateFormat="Long"></DatePicker>

Whether the Short or the Long format is used, the actual format of the date is decided by the culture of your application. If you don't specifically define a culture for your application, the system settings are used. You will notice from the screenshots of this article that on this computer, the date format is DMY (date-month-year), but this can easily be changed by setting a specific culture. We'll discuss that elsewhere in this tutorial.

Blackout dates

Depending on what you use the DatePicker control for, you may want to black out certain dates. This will prevent the selection of these dates, which will be visually indicated, and could be relevant e.g. in a booking application, where you want to prevent already reserved dates from being selected. The DatePicker control supports this right out of the box through the use of the BlackoutDates collection, which you can of course use from both XAML and Code-behind. Here's how to do it with XAML:

<DatePicker Name="dp1">
    <DatePicker.BlackoutDates>
<CalendarDateRange Start="2019-04-01" End="2019-04-07" />
<CalendarDateRange Start="2019-04-22" End="2019-04-28" />
    </DatePicker.BlackoutDates>
</DatePicker>

The result will look like this:

Doing it from Code-behind is just as easy and it has two added benefits: First of all, you can create the date range dynamically, e.g. based on the current date. You can also use the AddDatesInPast() method to automatically exclude all dates in the past. Here's an example:

dp1.BlackoutDates.AddDatesInPast();
dp1.BlackoutDates.Add(new CalendarDateRange(DateTime.Now, DateTime.Now.AddDays(7)));

With that in place, all past dates, as well as the next week, will be unavailable for selection.

Summary

The DatePicker control allows the user to specify a valid date, either by writing it in the text box or by selecting it from the built-in calendar widget. If the date is entered manually, it will be validated immediately and only allowed to remain in the text box if it's valid. This will make it much easier for you to create forms which includes dates.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!