Date Restriction in WinUI Date Picker

19 Apr 20226 minutes to read

This section explains how to restrict the date selection in WinUI Date Picker control.

Limit the available dates

You can restrict the users from selecting a date within the particular range by specifying MinDate and MaxDate properties in Date Picker control. The default value of MinDate property is 1/1/1921 and MaxDate property is 12/31/2121.

MainWindow.xaml.cs

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.MinDate = new DateTimeOffset(new DateTime(2020,12,18));
sfDatePicker.MaxDate = new DateTimeOffset(new DateTime(2020,12,20));

NOTE

Download demo application from GitHub

Disable dates using BlackoutDates

If you want to block particular dates from the date selection, add that dates into the BlackoutDates collection. You can add more block out dates to the BlackoutDates collection. The default value of BlackoutDates property is null.

ViewModel.cs

public class ViewModel
{       
    public DateTimeOffsetCollection BlockedDates { get; set; }
    public ViewModel()
    {
        BlockedDates = new DateTimeOffsetCollection();
        BlockedDates.Add(new DateTimeOffset(new DateTime(2018, 1, 28)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 26)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 29)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2021, 1, 31)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2023, 1, 28)));
        BlockedDates.Add(new DateTimeOffset(new DateTime(2024, 1, 28)));
    }
}

MainWindow.xaml

<editors:SfDatePicker  
                      x:Name="sfDatePicker"
                      BlackoutDates="{Binding BlockedDates}">
    <editors:SfDatePicker.DataContext>
        <local:ViewModel/>
    </editors:SfDatePicker.DataContext>
</editors:SfDatePicker>

MainWindow.xaml.cs

sfDatePicker.DataContext = new ViewModel();
sfDatePicker.BlackoutDates = (sfDatePicker.DataContext as ViewModel).BlockedDates;;

NOTE

Download demo application from GitHub

Disable dates dynamically (disable weekends)

If you want to block all weekend dates or any dates from the date selection, handle the DateFieldItemPrepared event and use the DateTimeFieldItemPreparedEventArgs.ItemInfo.IsEnabled property value as true.

MainWindow.xaml

<editors:SfDatePicker x:Name="sfDatePicker" 
                      DateFieldItemPrepared = "SfDatePicker_DateFieldItemPrepared"/>

MainWindow.xaml.cs

sfDatePicker.DateFieldItemPrepared += SfDatePicker_DateFieldItemPrepared;

You can handle the event as follows,

MainWindow.xaml.cs

private void SfDatePicker_DateFieldItemPrepared(object sender, DateTimeFieldItemPreparedEventArgs e)
{
    //Restrict the weekend days
    if (e.ItemInfo.DateTime.Value.DayOfWeek == DayOfWeek.Saturday ||
            e.ItemInfo.DateTime.Value.DayOfWeek == DayOfWeek.Sunday)
    {
        e.ItemInfo.IsEnabled = false;
    }
}

NOTE

Download demo application from GitHub

Select date as you scroll spinner

If you want to hide the submit button and select the date directly from the dropdown date spinner without clicking the Ok button, use the ShowSubmitButtons property value as false. The default value of ShowSubmitButtons property is true.

MainWindow.xaml

<editors:SfDatePicker 
                      x:Name="sfDatePicker"
                      ShowSubmitButtons="False"/>

MainWindow.xaml.cs

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.ShowSubmitButtons = false;

NOTE

Download demo application from GitHub

Cancel a date that is being changed

The SelectedDateChanging event will be triggered, as soon as a date is selected but before SelectedDate property is updated. If the change is considered invalid, it can be canceled. The SelectedDateChanging event contains the following properties.

• OldDate - Gets a date which is previously selected.
• NewDate - Gets a date which is currently selected.
• Cancel - Gets or sets whether to cancel the selected date value update.

Users are restricted to select a blackout date from dropdown, however user can give text input through editor. As selecting a blackout date leads to crash, we can cancel the change using SelectedDateChanging event.

NOTE

SelectedDateChanging event is called before the SelectedDateChanged event when a date is selected.

MainWindow.xaml

<editor:SfDatePicker Height="35" 
                     Width="150" 
                     SelectedDateChanging="SfDatePicker_DateChanging" />

MainWindow.xaml.cs

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.SelectedDateChanging += SfDatePicker_DateChanging;

You can handle the event as follows:

MainWindow.xaml.cs

private void SfDatePicker_DateChanging(object sender, Syncfusion.UI.Xaml.Editors.DateChangingEventArgs e)
{
    var OldDate = e.OldDate;
    var NewDate = e.NewDate;

    //Cancel Selected date update
    e.Cancel = true;
}