Partilhar via

Seletor de data do calendário

  • Artigo

O seletor de data do calendário é um controle suspenso otimizado para escolher uma única data de uma exibição de calendário onde informações contextuais como o dia da semana ou a plenitude do calendário são importantes. Você pode modificar o calendário para fornecer contexto adicional ou limitar as datas disponíveis.

Será este o controlo correto?

Use um seletor de data de calendário para permitir que um usuário escolha uma única data em uma exibição de calendário contextual. Use-o para coisas como escolher um compromisso ou data de partida.

Para permitir que um usuário escolha uma data conhecida, como uma data de nascimento, em que o contexto do calendário não é importante, considere usar um seletor de data .

Para obter mais informações sobre como escolher o controle correto, consulte o artigo Controles de data e hora.

Exemplos

O ponto de entrada exibe texto de exemplo se uma data não tiver sido definida; caso contrário, exibe a data escolhida. Quando o usuário seleciona o ponto de entrada, uma exibição de calendário é expandida para que o usuário faça uma seleção de data. O modo de exibição de calendário sobrepõe outra interface do usuário; ele não empurra outra interface do usuário para fora do caminho.

Captura de ecrã de um Seletor de Data de um Calendário mostrando uma caixa de texto vazia para selecionar uma data e, em seguida, uma preenchida, com um calendário abaixo dela.

Criar um seletor de data do calendário

Abra o aplicativo WinUI 3 Gallery e veja o CalendarDatePicker em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

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

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

O seletor de data do calendário resultante tem esta aparência:

Captura de ecrã de um Seletor de Data preenchido com uma etiqueta que diz Calendário.

O seletor de data do calendário tem um CalendarView interno para escolher uma data. Um subconjunto de propriedades CalendarView, como IsTodayHighlighted e FirstDayOfWeek, existem no CalendarDatePicker e são encaminhados para o CalendarView interno para permitir que você o modifique.

No entanto, não é possível alterar a SelectionMode do CalendarView interno para permitir várias seleções. Se você precisar permitir que um usuário escolha várias datas ou precisar que um calendário esteja sempre visível, considere usar um modo de exibição de calendário em vez de um seletor de data de calendário. Veja o artigo vista do calendário para obter mais informações sobre como modificar a exibição do calendário.

Seleção de datas

Use a propriedade Data para obter ou definir a data selecionada. Por padrão, a propriedade Date é null. Quando um usuário seleciona uma data no modo de exibição de calendário, essa propriedade é atualizada. Um usuário pode limpar a data clicando na data selecionada na exibição de calendário para desmarcá-la.

Você pode definir a data em seu código assim.

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

Quando você define a Data no código, o valor é restringido pelas propriedades MinDate e MaxDate.

  • Se Data for menor que MinDate, o valor será definido como MinDate.
  • Se Data for maior que MaxDate, o valor será definido como MaxDate.

Você pode manipular o evento DateChanged para ser notificado quando o valor Date for alterado.

Observação

Para obter informações importantes sobre valores de data, consulte valores de DateTime e Calendário no artigo sobre Controles de data e hora.

Definindo um cabeçalho e texto de espaço reservado

Você pode adicionar um Cabeçalho (ou rótulo) e Texto de Espaço Reservado (ou marca d'água) ao seletor de datas para dar ao usuário uma indicação do seu propósito. Para personalizar a aparência do cabeçalho, você pode definir a propriedade HeaderTemplate em vez de Header.

O texto de espaço reservado padrão é "selecione uma data". Você pode remover isso definindo a propriedade PlaceholderText como uma cadeia de caracteres vazia ou pode fornecer texto personalizado como mostrado aqui.

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

UWP e WinUI 2

Importante

As informações e os exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativo Windows e WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam WinUI 2. Consulte a referência da API UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações que você precisa para usar o controle em um aplicativo UWP ou WinUI 2.

As APIs para esse controle existem no namespace Windows.UI.Xaml.Controls.

Recomendamos usar o mais recente WinUI 2 para obter os estilos e modelos mais atuais para todos os controlos. WinUI 2.2 ou posterior inclui um novo modelo para este controle que usa cantos arredondados. Para obter mais informações, consulte Raio de canto.