Partilhar via

Seletor de data

O seletor de data oferece uma maneira padronizada de permitir que os usuários escolham um valor de data localizado usando a entrada por toque, mouse ou teclado.

Exemplo de seletor de data

Será este o controlo correto?

Use um seletor de data 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.

Se o contexto de um calendário for importante, considere usar um seletor de data ou uma vista de calendário .

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

Examples

O ponto de entrada exibe a data escolhida e, quando o usuário seleciona o ponto de entrada, uma superfície do seletor se expande verticalmente do meio para o usuário fazer uma seleção. O seletor de data sobrepõe outra interface do usuário; ele não empurra outra interface do usuário para fora do caminho.

Exemplo do seletor de data expandindo

Criar um seletor de data

Abra o aplicativo WinUI 3 Gallery e veja o DatePicker 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

Este exemplo mostra como criar um seletor de data simples com um cabeçalho.

<DatePicker x:Name="exampleDatePicker" Header="Pick a date"/>

DatePicker exampleDatePicker = new DatePicker();
exampleDatePicker.Header = "Pick a date";

O seletor de data resultante tem esta aparência:

Exemplo de seletor de data

Formatar o seletor de data

Por padrão, o seletor de data mostra o dia, o mês e o ano. Se o seu cenário para o seletor de data não exigir todos os campos, você poderá ocultar os que não precisa. Para ocultar um campo, defina o campo correspondentepropriedade Visible como false: DayVisible, MonthVisibleou YearVisible.

Aqui, apenas o ano é necessário, por isso os campos de dia e mês são ocultos.

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

Um seletor de data com os campos de dia e mês ocultos.

O conteúdo da cadeia de caracteres de cada ComboBox no DatePicker é criado por um DateTimeFormatter. Você informa ao DateTimeFormatter como formatar o valor de data fornecendo uma cadeia de caracteres que seja um modelo de formato ou um padrão de formato . Para obter mais informações, consulte as propriedades DayFormat, MonthFormate YearFormat.

Aqui, um padrão de formato é usado para mostrar o mês como um inteiro e uma abreviação. Você pode adicionar cadeias de caracteres literais ao padrão de formato, como os parênteses em torno da abreviatura do mês: ({month.abbreviated}).

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

Um seletor de data com o campo de dia oculto.

Valores de data

O controle seletor de data tem Date/DateChanged e SelectedDate/SelectedDateChanged APIs. A diferença entre eles é que Date não é anulável, enquanto SelectedDate é anulável.

O valor de SelectedDate é usado para preencher o seletor de data e é null por padrão. Se SelectedDate for igual a null, a propriedade Date será definida para 31/12/1600; caso contrário, o valor Date será sincronizado com o valor SelectedDate. Quando SelectedDate é null, o seletor é 'desdefinido' e mostra os nomes dos campos em vez de uma data.

Um seletor de data sem data selecionada.

Você pode definir as propriedades MinYear e MaxYear para restringir os valores de data no seletor. Por padrão, MinYear é definido como 100 anos antes da data atual e MaxYear é definido como 100 anos após a data atual.

Se você definir apenas MinYear ou MaxYear, precisará garantir que um intervalo de datas válido seja criado pela data definida e pelo valor padrão da outra data; caso contrário, nenhuma data estará disponível para selecionar no seletor. Por exemplo, definir apenas yearDatePicker.MaxYear = new DateTimeOffset(new DateTime(900, 1, 1)); cria um intervalo de datas inválido com o valor padrão de MinYear.

Inicializando um valor de data

As propriedades de data não podem ser definidas como uma cadeia de caracteres de atributo XAML, porque o analisador XAML do Tempo de Execução do Windows não tem uma lógica de conversão para converter cadeias de caracteres em datas como objetos DateTime / DateTimeOffset. Aqui estão algumas maneiras sugeridas de que esses objetos podem ser definidos em código e definidos para uma data diferente da data atual.

Outra técnica possível é definir uma data disponível como um objeto de dados ou no contexto de dados e, em seguida, definir a propriedade da data como um atributo XAML que referencia uma extensão de marcação {Binding} , que pode aceder a data como dados.

Observação

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

Este exemplo demonstra a definição das propriedades SelectedDate, MinYeare MaxYear em diferentes controles 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);
}

Usando os valores de data

Para usar o valor de data na sua aplicação, normalmente utiliza uma associação de dados para a propriedade SelectedDate ou manipula o evento SelectedDateChanged.

Para ver um exemplo de utilização de um DatePicker e um TimePicker juntos para atualizar um único valor DateTime, consulte Controles de calendário, data e hora - Usar um seletor de data e um seletor de hora juntos.

Aqui, você usa um DatePicker para permitir que um usuário selecione sua data de chegada. Você manipula o evento SelectedDateChanged para atualizar uma instância de DateTime chamada 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;
    }
}

UWP e WinUI 2

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativos 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 a WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles. WinUI 2.2 ou posterior inclui um novo modelo para este controle que usa cantos arredondados. Consulte Raio de cantopara obter mais informações.

  • Last updated on