Date Picker mode in .NET MAUI Date Picker (SfDatePicker)

22 Sep 20256 minutes to read

The date picker mode is specified in the picker property enumeration, which is used to display the date picker based on the modes. It offers three modes: Default, Dialog, and RelativeDialog. The default picker mode is Default in the SfDatePicker.

Dialog Mode

The dialog mode is used to display the date picker in a pop-up by setting the Mode property to Dialog in SfDatePicker.

<picker:SfDatePicker x:Name="datePicker"
                     Mode="Dialog"/>

SfDatePicker datePicker = new SfDatePicker()
{
    Mode = PickerMode.Dialog
};

this.Content = datePicker;

The Date Picker can be opened programmatically by setting the IsOpen property to true of SfDatePicker. By default, the IsOpen property is false.

Note: This property is automatically changed to false when you close the dialog by clicking outside of it.

<Grid>
    <picker:SfDatePicker x:Name="datepicker"
                         Mode="Dialog"/>
    <Button Text="Open Picker" 
            x:Name="pickerButton"
            Clicked="Button_Clicked"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            HeightRequest="50" 
            WidthRequest="150">
    </Button>
</Grid>
private void Button_Clicked(object sender, System.EventArgs e)
{
    this.datepicker.IsOpen = true;
}

Dialog mode in .NET MAUI Date picker.

Relative Dialog Mode

The relative dialog mode displays the date picker in a pop-up by setting the Mode property to RelativeDialog. It is used to align the picker in a specific position. You can set the position by setting the RelativePosition property in the SfDatePicker.

Relative position

The RelativePosition is specified in the picker property enumeration, which is used to align the picker in a specific position. It provides eight positions such as AlignTop, AlignToLeftOf, AlignToRightOf, AlignBottom, AlignTopLeft, AlignTopRight, AlignBottomLeft, and AlignBottomRight. The default relative position is AlignTop in the SfDatePicker.

The Date Picker can be opened programmatically by setting the IsOpen property to true of SfDatePicker. By default, the IsOpen property is false.

Note: This property is automatically changed to false when you close the dialog by clicking outside of it.

<Grid>
    <picker:SfDatePicker x:Name="datePicker" 
                         Mode="RelativeDialog"
                         RelativePosition="AlignTopLeft">
    </picker:SfDatePicker>
    <Button Text="Open picker" 
            x:Name="pickerButton"
            Clicked="Button_Clicked"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            HeightRequest="50" 
            WidthRequest="150">
    </Button>
</Grid>
private void Button_Clicked(object sender, System.EventArgs e)
{
    this.datepicker.IsOpen = true;
}

Relative view

The RelativeView is specified in the picker’s property enumeration and is used to display the picker dialog relative to a view by setting the Mode property to RelativeDialog. You can set the position by setting the RelativePosition property in the SfDatePicker.

NOTE

It is only applicable in RelativeDialog mode. If no relative view is specified, the picker base will be set as the default relative view.

<Grid>
    <picker:SfDatePicker x:Name="datePicker" 
                         Mode="RelativeDialog"
                         RelativePosition="AlignTopLeft"
                         RelativeView = "{x:Reference pickerButton}">
    </picker:SfDatePicker>
    <Button Text="Open picker" 
            x:Name="pickerButton"
            Clicked="Button_Clicked"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            HeightRequest="50" 
            WidthRequest="150">
    </Button>
</Grid>
private void Button_Clicked(object sender, System.EventArgs e)
{
    this.datepicker.IsOpen = true;
    this.datepicker.RelativeView = pickerButton;
}

Relative dialog mode in .NET MAUI Date picker.

Relative dialog mode in .NET MAUI Date picker.

Custom Popup Size

SfDatePicker allows the display of the Popup to render at any desired size by setting the PopupWidth and PopupHeight properties.

<picker:SfdatePicker x:Name="datePicker" 
                         Mode="Dialog"
                         PopupWidth="300"
                         PopupHeight="400"/>
this.datePicker.PopupWidth = 300;
this.datePicker.PopupHeight = 400;