SfDateSelector in UWP DatePicker

18 Nov 201819 minutes to read

The SfDateSelector control opens inside the drop-down popup.

The visual elements of the date selector can be customized using the SelectorStyle property.

Header

The Header property defines the top part of the SfDateSelector.

XAML

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <syncfusion:SfDatePicker VerticalAlignment="Center"

                               HorizontalAlignment="Center"

                               Width="200">

            <syncfusion:SfDatePicker.SelectorStyle>

                <Style TargetType="syncfusion:SfDateSelector">

                    <Setter Property="Header" Value="Set your alarm"/>

                </Style>

            </syncfusion:SfDatePicker.SelectorStyle>

    </syncfusion:SfDatePicker>

</Page>

HeaderTemplate

The HeaderTemplate property is used to decorate the header.

XAML

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <syncfusion:SfDatePicker VerticalAlignment="Center" 

                               HorizontalAlignment="Center"

                               Width="200">

            <syncfusion:SfDatePicker.SelectorStyle>

                <Style TargetType="syncfusion:SfDateSelector">

                    <Setter Property="HeaderTemplate">

                        <Setter.Value>

                            <DataTemplate>

                                <StackPanel Orientation="Horizontal">

                                    <TextBlock Text="&#xE170;" 

                                           VerticalAlignment="Top"

                                           Margin="5"

                                           FontSize="22"

                                           FontFamily="Segoe UI Symbol"/>

                                    <TextBlock Text="Set your alarm" 

                                           VerticalAlignment="Top"

                                           Margin="5"

                                           FontSize="22"

                                           />

                                </StackPanel>

                            </DataTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </syncfusion:SfDatePicker.SelectorStyle>        
            </syncfusion:SfDatePicker>

</Page>

Cell template

The cell template property is used to decorate the selection box with custom visuals.

The DataContext of the selection box is Syncfusion.UI.Xaml.Primitives.DateTimeWrapper.

DayCellTemplate

The DayCellTemplate property is used to decorate the day cell selection box.

XAML

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <syncfusion:SfDatePicker VerticalAlignment="Center"

                               HorizontalAlignment="Center"

                               Width="200">

            <syncfusion:SfDatePicker.SelectorStyle>

                <Style TargetType="syncfusion:SfDateSelector">

                      <Setter Property="DayCellTemplate">

                        <Setter.Value>

                            <DataTemplate>

                                <Grid>

                                    <TextBlock VerticalAlignment="Top" 

                                               HorizontalAlignment="Right"

                                               Margin="5"

                                               FontSize="22"

                                               FontFamily="Segoe UI Symbol"

                                               Text="&#xE170;"/>

                                    <TextBlock Text="{Binding DayNumber}" 

                                               VerticalAlignment="Bottom" 

                                               Margin="5"

                                               FontSize="22"/>

                                </Grid>

                            </DataTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </syncfusion:SfDatePicker.SelectorStyle>

    </syncfusion:SfDatePicker>

</Page>

MonthCellTemplate

The MonthCellTemplate property is used to decorate the month cell selection box.

XAML

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <syncfusion:SfDatePicker VerticalAlignment="Center"

                               HorizontalAlignment="Center"

                               Width="200">

            <syncfusion:SfDatePicker.SelectorStyle>

                <Style TargetType="syncfusion:SfDateSelector">

                    <Setter Property="MonthCellTemplate">

                        <Setter.Value>

                            <DataTemplate>

                                <Grid>

                                    <TextBlock VerticalAlignment="Top" 

                                               HorizontalAlignment="Right"

                                               Margin="5"

                                               FontSize="22"

                                               FontFamily="Segoe UI Symbol"

                                               Text="&#xE170;"/>

                                    <TextBlock Text="{Binding MonthNumber}" 

                                               VerticalAlignment="Bottom" 

                                               Margin="5"

                                               FontSize="22"/>

                                </Grid>

                            </DataTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </syncfusion:SfDatePicker.SelectorStyle>

        </syncfusion:SfDatePicker>

</Page>

YearCellTemplate

The YearCellTemplate property is used to decorate the year cell selection box.

XAML

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <syncfusion:SfDatePicker VerticalAlignment="Center"

                               HorizontalAlignment="Center"

                               Width="200">

            <syncfusion:SfDatePicker.SelectorStyle>

                <Style TargetType="syncfusion:SfDateSelector">

                    <Setter Property="YearCellTemplate">

                        <Setter.Value>

                            <DataTemplate>

                                <Grid>

                                    <TextBlock VerticalAlignment="Top" 

                                               HorizontalAlignment="Right"

                                               Margin="5"

                                               FontSize="22"

                                               FontFamily="Segoe UI Symbol"

                                               Text="&#xE170;"/>

                                    <TextBlock Text="{Binding YearNumber}" 

                                               VerticalAlignment="Bottom" 

                                               Margin="5"

                                               FontSize="22"/>

                                </Grid>

                            </DataTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </syncfusion:SfDatePicker.SelectorStyle>        </syncfusion:SfDatePicker>

</Page>