How can I set different patterns for the date in the SfDatePicker?

8 mins read

In the SfDatePicker, different patterns can be set for dates by using the SelectorFormatString property according to its values. Some of the patterns are as follows:

MonthDayPattern
YearMonthPattern
DayYearPattern
YearMonthDayPattern
YearDayMonthPattern
YearPattern

The following code example explains how to set the SelectorFormatString property for the MonthDayPattern:

XAML

<Page
    x:Class="SfDatePicker.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using: SfDatePicker"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Input="using:Syncfusion.UI.Xaml.Controls.Input"
    mc:Ignorable="d">
    <Grid x:Name="Grid1” Background="{StaticResourceApplicationPageBackgroundThemeBrush}">         
        <Input:SfDatePicker Name="DatePicker" Width="100" Height="23" SelectorFormatString="M/d" VerticalAlignment="Center" HorizontalAlignment="Center"></Input:SfDatePicker>       
    </Grid>
</Page>

using Syncfusion.UI.Xaml.Controls.Input;
namespace SfDatePicker {
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            SfDatePicker DatePicker = new SfDatePicker();
            DatePicker.Height = 23;
            DatePicker.Width = 100;
            DatePicker.VerticalAlignment = VerticalAlignment.Center;
            DatePicker.HorizontalAlignment = HorizontalAlignment.Center;
            DatePicker.SelectorFormatString = "M/d";
            Grid1.Children.Add(DatePicker);
        }
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page is reached.  The Parameter property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }      
    }
}

The following screenshot shows the MonthDay pattern.

Figure 1: MonthDay pattern

2. The following code explains how to set the SelectorFormatString property for the YearMonth pattern:

XAML

<Page
    x:Class="SfDatePicker.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SfDatePicker "
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Input="using:Syncfusion.UI.Xaml.Controls.Input"
    mc:Ignorable="d">
    <Grid x:Name="Grid1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">         
        <Input:SfDatePicker Name="DatePicker" Width="100" Height="23" SelectorFormatString="y/m" VerticalAlignment="Center" HorizontalAlignment="Center"></Input:SfDatePicker>       
    </Grid>
</Page>

using Syncfusion.UI.Xaml.Controls.Input;
namespace SfDatePicker{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            SfDatePicker DatePicker = new SfDatePicker();
            DatePicker.Height = 23;
            DatePicker.Width = 100;
            DatePicker.VerticalAlignment = VerticalAlignment.Center;
            DatePicker.HorizontalAlignment = HorizontalAlignment.Center;
            DatePicker.SelectorFormatString = "y/m";
            Grid1.Children.Add(DatePicker);
        }
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page is reached.  The Parameter property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {is
        }      
    }
}

The following screenshot shows the YearMonth pattern.

Figure 2: YearMonth pattern

The following code example explains how to set the SelectorFormatString property for the DayYearPattern:

XAML

<Page
    x:Class="SfDatePicker.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SfDatePicker "
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Input="using:Syncfusion.UI.Xaml.Controls.Input"
    mc:Ignorable="d">
    <Grid x:Name="Grid1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">         
        <Input:SfDatePicker Name="DatePicker" Width="100" Height="23" SelectorFormatString="d/y" VerticalAlignment="Center" HorizontalAlignment="Center"></Input:SfDatePicker>       
    </Grid>
</Page>

using Syncfusion.UI.Xaml.Controls.Input;
namespace SfDatePicker
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            SfDatePicker DatePicker = new SfDatePicker();
            DatePicker.Height = 23;
            DatePicker.Width = 100;
            DatePicker.VerticalAlignment = VerticalAlignment.Center;
            DatePicker.HorizontalAlignment = HorizontalAlignment.Center;
            DatePicker.SelectorFormatString = "d/y";
            Grid1.Children.Add(DatePicker);
        }
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page is reached.  The Parameter property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }       
    }
}

The following screenshot shows the DayYear pattern.

Figure 3: DayYear pattern

The following code example explains how to set the SelectorFormatString property for the YearMonthDay pattern.

XAML

<Page
    x:Class="SfDatePicker.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SfDatePicker "
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Input="using:Syncfusion.UI.Xaml.Controls.Input"
    mc:Ignorable="d">
    <Grid x:Name="Grid1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">         
        <Input:SfDatePicker Name="DatePicker" Width="100" Height="23" SelectorFormatString="y/m/d" VerticalAlignment="Center" HorizontalAlignment="Center"></Input:SfDatePicker>    
    </Grid>
</Page>

using Syncfusion.UI.Xaml.Controls.Input;
namespace SfDatePicker
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            SfDatePicker DatePicker = new SfDatePicker();
            DatePicker.Height = 23;
            DatePicker.Width = 100;
            DatePicker.VerticalAlignment = VerticalAlignment.Center;
            DatePicker.HorizontalAlignment = HorizontalAlignment.Center;
            DatePicker.SelectorFormatString = "y/m/d";
            Grid1.Children.Add(DatePicker);
        }
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page is reached.  The Parameter property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }       
    }
}

The following screenshot shows the date with YearMonthDay pattern.

Figure 4: YearMonthDay pattern

The following code explains how to set the SelectorFormatString property for the YearDayMonth pattern.

XAML

<Page
    x:Class="SfDatePicker.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SfDatePicker "
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Input="using:Syncfusion.UI.Xaml.Controls.Input"
    mc:Ignorable="d">
    <Grid x:Name="Grid1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">         
        <Input:SfDatePicker Name="DatePicker" Width="100" Height="23" SelectorFormatString="y/d/m" VerticalAlignment="Center" HorizontalAlignment="Center"></Input:SfDatePicker>    
    </Grid>
</Page>

using Syncfusion.UI.Xaml.Controls.Input;
namespace SfDatePicker
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            SfDatePicker DatePicker = new SfDatePicker();
            DatePicker.Height = 23;
            DatePicker.Width = 100;
            DatePicker.VerticalAlignment = VerticalAlignment.Center;
            DatePicker.HorizontalAlignment = HorizontalAlignment.Center;
            DatePicker.SelectorFormatString = "y/d/m";
            Grid1.Children.Add(DatePicker);
        }
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page is reached.  The Parameter property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

The following screenshot shows the date with the YearDayMonth pattern.

Figure 5: YearDayMonth pattern

The following code example explains how to set the SelectorFormatString property for the YearPattern.

XAML

<Page
    x:Class="SfDatePicker.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SfDatePicker "
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Input="using:Syncfusion.UI.Xaml.Controls.Input"
    mc:Ignorable="d">
    <Grid x:Name="Grid1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">         
        <Input:SfDatePicker Name="DatePicker" Width="100" Height="23" SelectorFormatString="y" VerticalAlignment="Center" HorizontalAlignment="Center"></Input:SfDatePicker>    
    </Grid>
</Page>

using Syncfusion.UI.Xaml.Controls.Input;
namespace SfDatePicker{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            SfDatePicker DatePicker = new SfDatePicker();
            DatePicker.Height = 23;
            DatePicker.Width = 100;
            DatePicker.VerticalAlignment = VerticalAlignment.Center;
            DatePicker.HorizontalAlignment = HorizontalAlignment.Center;
            DatePicker.SelectorFormatString = "y";
            Grid1.Children.Add(DatePicker);
        }
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page is reached.  The Parameter property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }  }

The following screenshot shows the date with the Year pattern.

Figure 6: Year pattern

Did you find this information helpful?

Yes

Comments (0)

How can I set different patterns for the date in the SfDatePicker?

Access denied