How to customize the header of the SfDateSelector?

1 min read

The Header of the SfDateSelector can be customized by changing the selector style of the SfDatePicker. The same has been demonstrated in the following code example:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <input:SfDatePicker VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                                          Width="200">
 
            <input:SfDatePicker.SelectorStyle>
            <Style TargetType="input:SfDateSelector">
             <Setter Property="HeaderTemplate">
                <Setter.Value>
                  <DataTemplate>
                     <TextBlock Text="Set your reminder" Height="50" 
                                FontFamily="Castellar" Margin="10" FontSize="20"/> 
                  </DataTemplate>
                 </Setter.Value>
              </Setter>
             </Style> 
            </input:SfDatePicker.SelectorStyle>
         </input:SfDatePicker>
 </Grid>

Output:

Did you find this information helpful?

Yes

Comments (0)

How to customize the header of the SfDateSelector?

Access denied